TabBar 标签栏

用于创建不含内容区域的标签栏

引入

import { TabBar } from 'mand-mobile-next'

Vue.createApp().component(TabBar.name, TabBar)

代码演示

API

TabBar Props

属性说明类型默认值备注
v-model双向绑定的标签对象nameString
items标签标题数组Array<{name: String, label: String, disabled: Boolean}>
has-ink是否显示下划线Booleantrue
ink-length下划线宽度Number0该数值为下划线占标签按钮宽度的百分比,须在1-100之间
immediate初始化后立即就触发一次change事件Booleanfalse

TabBar Methods

TabBar Events

@change(item, index, prevIndex)

标签索引发生变化事件

属性说明类型
item选中的标签对象Object
index选中的标签索引Number
prevIndex上一标签索引Number

TabBar Slot

<md-tab-bar>
  <template #default="slotProps">
    <span class="green">
      {{ slotProps.item.label }}
    </span>
  </template>
</md-tab-bar>