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 属性设置标签的徽标，通过 dot 设置小圆点展示。

<vd-tabbar v-model="active">
  <vd-tabbar-item title="首页" icon="home" />
  <vd-tabbar-item title="消息" icon="msg" badge="9" />
  <vd-tabbar-item title="购物车" icon="cart" dot />
  <vd-tabbar-item title="我的" icon="user" />
</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	选中标签	stringg | number	-
fixed	是否固定在底部	boolean	true
placeholder	固定在底部时，是否启用占位元素	boolean	true
safe-area-inset-bottom	固定在底部时，是否设置底部安全距离	boolean	true
z-index	在底部时的层级	string | number	9

TabbarItem Props

参数	说明	类型	默认值
name	标签名称	stringg | number	-
icon	图标	IconsName	-
badge	右上角徽标的内容	string | number	-
dot	是否展示右上角小红点	boolean	false

代替原始 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	图标