FmTabs 标签页组件

标签页切换组件，支持图标和自定义样式。

基础用法

<script setup lang="ts">
const activeTab = ref('1')
const list = [
  { label: '标签一', value: '1' },
  { label: '标签二', value: '2' },
  { label: '标签三', value: '3' },
]
</script>

<template>
  <FmTabs v-model="activeTab" :list>
    <template #1>内容一</template>
    <template #2>内容二</template>
    <template #3>内容三</template>
  </FmTabs>
</template>

Props

属性	类型	默认值	说明
modelValue	string | number	-	当前激活的标签值
list	Array<{ icon?: string, label: string, value: string | number, class?: HTMLAttributes['class'] }>	必需	标签列表
class	HTMLAttributes['class']	-	容器 CSS 类
listClass	HTMLAttributes['class']	-	标签列表 CSS 类
contentClass	HTMLAttributes['class']	-	内容区 CSS 类

Slots

名称	说明
[value]	对应标签值的内容（动态插槽名）

Events

事件名	参数	说明
update:modelValue	value: string | number	标签切换时触发

示例

基础标签页

<script setup lang="ts">
const activeTab = ref('1')
const list = [
  { label: '基本信息', value: '1' },
  { label: '详细信息', value: '2' },
  { label: '其他信息', value: '3' },
]
</script>

<template>
  <FmTabs v-model="activeTab" :list>
    <template #1>
      <p>基本信息内容...</p>
    </template>
    <template #2>
      <p>详细信息内容...</p>
    </template>
    <template #3>
      <p>其他信息内容...</p>
    </template>
  </FmTabs>
</template>

带图标的标签

<script setup lang="ts">
const activeTab = ref('1')
const list = [
  { icon: 'i-lucide:user', label: '用户', value: '1' },
  { icon: 'i-lucide:settings', label: '设置', value: '2' },
  { icon: 'i-lucide:bell', label: '通知', value: '3' },
]
</script>

<template>
  <FmTabs v-model="activeTab" :list>
    <template #1>用户内容...</template>
    <template #2>设置内容...</template>
    <template #3>通知内容...</template>
  </FmTabs>
</template>

数字标签值

<script setup lang="ts">
const activeTab = ref(1)
const list = [
  { label: '周一', value: 1 },
  { label: '周二', value: 2 },
  { label: '周三', value: 3 },
]
</script>

<template>
  <FmTabs v-model="activeTab" :list>
    <template #1>星期一的内容</template>
    <template #2>星期二的内容</template>
    <template #3>星期三的内容</template>
  </FmTabs>
</template>

自定义样式

<script setup lang="ts">
const activeTab = ref('1')
const list = [
  { label: '标签一', value: '1', class: 'w-32' },
  { label: '标签二', value: '2', class: 'w-32' },
]
</script>

<template>
  <FmTabs 
    v-model="activeTab" 
    :list
    class="w-full"
    list-class="bg-muted rounded-lg p-1"
    content-class="p-6"
  >
    <template #1>内容一</template>
    <template #2>内容二</template>
  </FmTabs>
</template>

监听标签变化

<script setup lang="ts">
const activeTab = ref('1')
const list = [
  { label: '列表', value: '1' },
  { label: '图表', value: '2' },
]

function handleTabChange(value: string) {
  console.log('切换到:', value)
  // 根据标签值加载不同数据
}
</script>

<template>
  <FmTabs v-model="activeTab" :list @update:model-value="handleTabChange">
    <template #1>列表内容...</template>
    <template #2>图表内容...</template>
  </FmTabs>
</template>

表单中的标签切换

<script setup lang="ts">
const activeTab = ref('basic')
const list = [
  { label: '基本信息', value: 'basic' },
  { label: '账号安全', value: 'security' },
  { label: '偏好设置', value: 'preference' },
]
</script>

<template>
  <FmTabs v-model="activeTab" :list>
    <template #basic>
      <form class="space-y-4">
        <FmInput label="用户名" />
        <FmInput label="邮箱" />
      </form>
    </template>
    <template #security>
      <form class="space-y-4">
        <FmInput label="当前密码" type="password" />
        <FmInput label="新密码" type="password" />
      </form>
    </template>
    <template #preference>
      <div class="space-y-4">
        <FmSwitch label="邮件通知" />
        <FmSwitch label="短信通知" />
      </div>
    </template>
  </FmTabs>
</template>

注意事项

1. 动态插槽：内容插槽名对应标签的 value 值
2. value 唯一性：确保每个标签的 value 唯一
3. 类型支持：value 支持字符串和数字两种类型
4. 图标可选：标签可以设置图标也可以不设置

典型使用场景

• 设置页面分类
• 详情信息分栏
• 数据视图切换（列表/图表）
• 表单分步
• 内容分类展示