引入组件

局部引入

// parent.vue
const FTabbar = defineAsyncComponent(() => import('@/components/formaui/f-tabbar/f-tabbar.vue'))

基础用法

items属性：标签栏选项列表

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

import { ref } from 'vue'

const activeIndex = ref(0)
const items = [
  { label: '首页', value: 'home', icon: 'home', activeIcon: 'home-fill' },
  { label: '分类', value: 'category', icon: 'category', activeIcon: 'category-fill' },
  { label: '购物车', value: 'cart', icon: 'cart', activeIcon: 'cart-fill', badge: 2 },
  { label: '我的', value: 'mine', icon: 'people', activeIcon: 'people-fill', isBadgeDot: true, badge: 1 }
]

const handleItemClick = (detail: { index: number; value?: string | number }) => {
  activeIndex.value = detail.index
}

isHump属性：中间凸起按钮（默认false）

中间项需设置 isHump: true，并开启组件级 is-hump。

<f-tabbar v-model="activeIndex" :items="humpItems" is-hump @item-click="handleItemClick" />

const humpItems = [
  { label: '首页', value: 'home', icon: 'home', activeIcon: 'home-fill' },
  { label: '分类', value: 'category', icon: 'category', activeIcon: 'category-fill' },
  { label: '发布', value: 'publish', icon: 'plus', activeIcon: 'plus', isHump: true },
  { label: '消息', value: 'message', icon: 'message', activeIcon: 'message-fill' },
  { label: '我的', value: 'mine', icon: 'people', activeIcon: 'people-fill' }
]

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

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

activeColor属性：选中颜色

<f-tabbar v-model="activeIndex" :items="items" active-color="#16479D" />

图片图标：使用 iconPath / selectedIconPath 代替字体图标

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

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

插槽

名称	说明
-	-

属性

名称	类型	说明	默认值
v-model	number	当前选中项索引	0
items	FTabbarItem[]	标签栏选项列表	-
textColor	string	文字颜色	#666666
activeColor	string	选中文字/图标颜色	主题色
bgColor	string	背景颜色	#FFFFFF
isHump	boolean	是否启用中间凸起样式	false
iconSize	string	图标尺寸	52rpx
isFixed	boolean	是否固定在底部	true
badgeColor	string	角标文字颜色	#FFFFFF
badgeBgColor	string	角标背景颜色	主题危险色
showLine	boolean	是否显示顶部分割线	true
isBackdropFilter	boolean	是否开启背景模糊	false
zIndex	number | string	固定定位 z-index	9999

FTabbarItem

名称	类型	说明	默认值
label	string	标签文字	-
value	string | number	选项值	索引
icon	string	字体图标名称	-
activeIcon	string	选中态字体图标	-
iconPath	string	默认图片路径	-
selectedIconPath	string	选中态图片路径	-
iconSize	string	单项图标尺寸	-
isHump	boolean	是否为凸起按钮	false
pagePath	string	页面路径	-
verify	boolean	切换前是否校验	-
badge	number | string	角标内容	-
isBadgeDot	boolean	角标是否为圆点	false

事件

事件名	说明	回调参数
itemClick	点击标签项时	{ index, value, isHump, pagePath, verify }

方法

方法名	说明	传入参数
-	-	-