选项卡 Tabs

移动端顶部导航切换栏（标准高度 44px），内置贯穿全宽的 0.5px 极细底边线，选中态配有长 28px、高 3px 的绿色圆角指示条，支持在标题右侧挂载数量统计。

基本用法

点击切换不同的标签页，指示条自动居中对齐当前激活项。

我的收藏

常购清单

推荐收藏

<template>
  <Tabs :items="tabList" v-model="activeTab"/>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Tabs, { type TabItem } from '@/components/common/Tabs.vue'

const activeTab = ref('fav')
const tabList: TabItem[] = [
  { label: '我的收藏', value: 'fav' },
  { label: '常购清单', value: 'often' },
  { label: '推荐收藏', value: 'recommend' }
]
</script>

带数量角标（count）

在 items 数组中传入 count 字段，标题右侧会自动以 12px 字号展示括弧数量统计。

全部商品(128)

有活动(16)

已失效(0)

<script setup lang="ts">
const tabList: TabItem[] = [
  { label: '全部商品', value: 'all', count: 128 },
  { label: '有活动', value: 'promo', count: 16 },
  { label: '已失效', value: 'expired', count: 0 }
]
</script>

API 参数说明

参数名	说明	类型	默认值
modelValue	当前激活选项卡的 value（支持 v-model）	string | number	必填
items	选项卡配置列表（{ label, value, count? }[]）	TabItem[]	必填