Tabs 标签页

选项卡组件，用于在不同的内容区域之间进行切换。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

通过 v-model 绑定当前激活标签的索引值，通过 tabs 属性设置标签列表。

<zq-tabs v-model="active" :tabs="['标签一', '标签二', '标签三']" />

const active = ref(0)

对象格式

tabs 数组项支持对象格式，可设置 title、icon、badge、dot、disabled。

<zq-tabs
  v-model="active"
  :tabs="[
    { title: '标签一', icon: 'home' },
    { title: '标签二', badge: 5 },
    { title: '标签三', dot: true },
    { title: '标签四', disabled: true },
  ]"
/>

线条风格

默认为 line 风格，底部显示指示线。

<zq-tabs v-model="active" type="line" :tabs="tabs" />

卡片风格

通过 type="card" 设置为卡片风格。

<zq-tabs v-model="active" type="card" :tabs="tabs" />

自定义颜色

通过 active-color 属性自定义激活标签的颜色。

<zq-tabs v-model="active" active-color="#ee0a24" :tabs="tabs" />

标签配合内容

<zq-tabs v-model="active" :tabs="['标签一', '标签二', '标签三']" @change="onChange">
  <!-- 在外部根据 active 切换内容 -->
</zq-tabs>
<view v-if="active === 0">内容一</view>
<view v-if="active === 1">内容二</view>
<view v-if="active === 2">内容三</view>

监听事件

<zq-tabs
  v-model="active"
  :tabs="tabs"
  @change="onChange"
  @click="onClick"
/>

function onChange(index) {
  console.log('切换到:', index)
}

function onClick({ index, item }) {
  console.log('点击:', index, item)
}

API

Props

参数	说明	类型	默认值
v-model	当前激活标签的索引	number	0
tabs	标签列表	(string | TabItem)[]	[]
type	标签样式风格	'line' | 'card'	'line'
active-color	激活标签的颜色	string	'var(--color-primary)'
swipeable	是否开启手势滑动切换（预留）	boolean	false
sticky	是否使用粘性定位（预留）	boolean	false

TabItem 数据结构

键名	说明	类型
title	标签标题	string
icon	标签图标名称	string
badge	徽标内容	number | string
dot	是否显示小红点	boolean
disabled	是否禁用	boolean

Events

事件名	说明	回调参数
update:modelValue	激活标签变化时触发	index: number
change	激活标签变化时触发	index: number
click	点击标签时触发	{ index: number, item: string | TabItem }

注意事项

• line 风格下，底部指示线会跟随激活标签移动，有 0.3s 的过渡动画。
• card 风格下，激活标签会有卡片凸起效果。
• 标签数量较多时支持横向滚动。
• 禁用的标签不可点击。

主题定制

变量名	说明
--color-primary	默认激活颜色/指示线颜色
--color-bg-card	标签栏背景色 / card 风格激活背景色
--color-bg-input	card 风格导航背景色
--color-text-secondary	未激活标签文字颜色
--color-text-disabled	禁用标签文字颜色