引入组件

局部引入

// parent.vue
const FBottomNav = defineAsyncComponent(() => import('@/components/formaui/f-bottom-nav/f-bottom-nav.vue'))

基础用法

items属性：导航项列表

底部导航支持三种 mode：1 选中切换、2 点击操作、3 弹出子菜单。

<f-bottom-nav v-model="activeIndex" :items="items" @item-click="handleItemClick" />

import { ref } from 'vue'

const activeIndex = ref(0)
const items = [
  { label: '首页', value: 'home', mode: 1 },
  { label: '分类', value: 'category', mode: 1 },
  { label: '购物车', value: 'cart', mode: 2 },
  {
    label: '更多',
    value: 'more',
    mode: 3,
    subItems: [
      { label: '扫一扫', value: 'scan' },
      { label: '消息中心', value: 'message' },
      { label: '设置', value: 'setting' }
    ]
  }
]

const handleItemClick = (detail) => {
  if (detail.menu === 'main' && detail.mode === 1) {
    activeIndex.value = detail.index
  }
}

mode=1：选中切换

点击后组件会通过 v-model 更新 activeIndex，并触发 itemClick。

mode=2：点击操作

仅触发 itemClick，不自动切换选中项。

mode=3：弹出子菜单

点击主项展开 subItems，点击子项后关闭菜单并触发 itemClick（menu 为 sub）。

图片图标：iconPath / selectedIconPath

<f-bottom-nav v-model="activeIndex" :items="imageItems" />

const imageItems = [
  {
    label: '首页',
    value: 'home',
    mode: 1,
    iconPath: '/static/tab/home.png',
    selectedIconPath: '/static/tab/home-active.png'
  },
  {
    label: '我的',
    value: 'mine',
    mode: 1,
    iconPath: '/static/tab/mine.png',
    selectedIconPath: '/static/tab/mine-active.png'
  }
]

isDarkMode属性：暗黑模式（默认false）

开启后使用内置暗色配色，自定义颜色失效。

<f-bottom-nav v-model="activeIndex" :items="items" is-dark-mode />

showLine属性：顶部分割线（默认true）

<f-bottom-nav v-model="activeIndex" :items="items" :show-line="false" />

isFixed属性：是否固定底部（默认true）

<f-bottom-nav v-model="activeIndex" :items="items" :is-fixed="false" />

插槽

名称	说明
—	暂无

属性

属性名	类型	说明	默认值
v-model	number	当前选中索引（mode=1 项）	0
items	FBottomNavItem[]	导航项列表	[]
textColor	string	默认文字颜色	#666666
activeColor	string	选中文字颜色	主题色
fontSize	string	文字大小	28rpx
isTabBold	boolean	选中项是否加粗	true
bgColor	string	背景色	#F8F8F8
isSplitLineShort	boolean	item 分割线是否缩短	true
subMenuTextColor	string	子菜单文字颜色	#0B1D4A
subMenuFontSize	string	子菜单文字大小	28rpx
subMenuBgColor	string	子菜单背景色	#FFFFFF
isSubMenuHover	boolean	子菜单点击态	true
isFixed	boolean	是否固定底部	true
showLine	boolean	是否显示顶部分割线	true
isDarkMode	boolean	是否暗黑模式	false

FBottomNavItem

属性名	类型	说明
label	string	导航文字
value	string | number	自定义参数，回调时返回
iconPath	string	默认图标图片
selectedIconPath	string	选中态图标（mode=1）
color	string	单项文字颜色
mode	1 | 2 | 3	交互模式
popupLeft	string	子菜单水平偏移，默认 50%
subItems	FBottomNavSubItem[]	子菜单列表

FBottomNavSubItem

属性名	类型	说明
label	string	子菜单文字
value	string | number	自定义参数

事件

事件名	说明	回调参数
itemClick	点击主菜单或子菜单	FBottomNavClickDetail

FBottomNavClickDetail

字段	类型	说明
menu	'main' | 'sub'	主菜单或子菜单
mode	number	对应 item 的 mode
index	number	主菜单索引
subIndex	number	子菜单索引（menu=sub 时）
value	string | number	自定义参数