Tabs 标签页

标签页用于在多个同层级内容之间切换，支持胶囊与下划线两种标签栏样式。标签项由 list 数据渲染，当前激活项通过 v-model 绑定索引控制。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-tabs 的用法，可按需组合。

<template>
  <mu-tabs :list="tabs" v-model="activeTab"></mu-tabs>
</template>

标签数据

通过 list 传入标签列表，元素结构为 { label, value?, icon? }，其中 label 为必填。

<mu-tabs :list="tabs"></mu-tabs>

激活索引

v-model 绑定当前激活标签的索引，从 0 开始。

<mu-tabs :list="tabs" v-model="activeTab"></mu-tabs>

样式类型

设置标签栏样式，可选胶囊与下划线两种。

<mu-tabs :list="tabs" v-model="activeTab" type="line"></mu-tabs>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

属性名称	说明	类型	默认值
v-model	当前激活标签的索引	number	0
list	标签数据列表	TabsItem[]	[]
type	标签栏样式，可选 pill、line	string	pill
customClass	自定义根节点类名	string	-
customStyle	自定义根节点样式	any	-

事件

组件支持以下事件。

事件名	说明	回调参数
change	切换标签时触发	index: number

注意事项

• 平台差异：App、小程序、Web 表现一致。
• 使用注意：v-model 绑定的是标签索引，list 的顺序或长度变化时需同步调整激活索引。
• 使用注意：list 为 TabsItem[]，每项必须提供 label；组件无插槽，内容完全由 list 渲染。
• 使用注意：点击已处于激活状态的标签不会再次触发 change。