Tabbar 标签栏

介绍

底部导航栏，用于在不同页面之间进行切换、展示操作按钮。

基础用法

通过 v-model 控制当前选中的标签索引。

<vd-tabbar v-model="active">
  <vd-tabbar-item title="首页" icon="home" />
  <vd-tabbar-item title="消息" icon="msg" />
  <vd-tabbar-item title="购物车" icon="cart" />
  <vd-tabbar-item title="我的" icon="user" />
</vd-tabbar>

const active = ref(0);

名称匹配

通过 name 属性设置标签的名称时，v-model 的值为绑定当前选中的标签名称。

<vd-tabbar v-model="active">
  <vd-tabbar-item name="1" title="首页" icon="home" />
  <vd-tabbar-item name="2" title="消息" icon="msg" />
  <vd-tabbar-item name="3" title="购物车" icon="cart" />
  <vd-tabbar-item name="4" title="我的" icon="user" />
</vd-tabbar>

const active = ref('1');

徽标展示

通过 badge-props 透传给 Badge（如 dot、value、max）。

<vd-tabbar v-model="active">
  <vd-tabbar-item icon="home">首页</vd-tabbar-item>
  <vd-tabbar-item icon="msg" :badge-props="{ value: 9 }">消息</vd-tabbar-item>
  <vd-tabbar-item icon="cart" :badge-props="{ dot: true }">购物车</vd-tabbar-item>
  <vd-tabbar-item icon="user">我的</vd-tabbar-item>
</vd-tabbar>

const active = ref(0);

使用插槽

通过插槽可设置自定义内容。

<vd-tabbar custom-class="tabbar-action">
  <vd-button type="danger" block :action="handleAction">删除</vd-button>
  <vd-button type="primary" block :action="handleAction">修改</vd-button>
</vd-tabbar>

async function handleAction() {
  await timeout(1000);
}

.tabbar-action .vd-tabbar__content {
  padding: 8px 16px;

  .vd-button {
    font-size: 16px;

    & + .vd-button {
      margin-left: 12px;
    }
  }
}

API

Tabbar Props

参数	说明	类型	默认值
v-model	选中标签	string | number	-
fixed	是否固定在底部	boolean	true
placeholder	固定在底部时，是否启用占位元素	boolean	true
safe-area-inset-bottom	固定在底部时，是否设置底部安全距离	boolean	true
z-index	在底部时的层级	string | number	9

TabbarItem Props

参数	说明	类型	默认值
name	标签名称	string | number	-
icon	图标	IconName	-
badge-props	徽标属性，透传给 Badge	Partial<BadgeProps>	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Tabbar Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
change	激活标签改变时触发	string | number
resize	尺寸改变时触发	NodeRect

TabbarItem Events

事件名	说明	回调参数
click	点击时触发	MouseEvent

Tabbar Slots

名称	说明
default	自定义内容

TabbarItem Slots

名称	说明
default	文字内容
icon	图标

主题变量

通过 ConfigProvider 的 theme-vars.tabbar 覆盖：

名称	说明	默认值
z-index	固定底部时的层级	9