Tab 标签页组件

该组件用于展示多个标签页，并支持切换标签页功能。

示例 1

<template>
  <Tab
    :data="tabData"
    v-model:active="activeTab"
    size="small"
    @tab="handleTabChange"
  >
    <template #default>
      <TabPane
        v-for="item in tabData"
        :key="item.name"
        :name="item.name"
        :label="item.label"
      >
        <item.component />
      </TabPane>
    </template>
  </Tab>
</template>

<script setup>
import Tab from '@/components/Tab/Tab.tsx'
import TabPane from '@/components/Tab/TabPane.tsx'
import { ref, h } from 'vue'

const activeTab = ref('')
const tabData = ref([
  { name: 'tab1', label: '标签页1', component: h('div', null, '1') },
  { name: 'tab2', label: '标签页2', component: h('div', null, '2') },
  { name: 'tab3', label: '标签页3', component: h('div', null, '3') },
])

const handleTabChange = (tabName) => {
  activeTab.value = tabName
}
</script>

示例 2

<template>
  <Tab
    :data="tabData"
    v-model:active="activeTab"
    size="small"
    @tab="handleTabChange"
  ></Tab>
</template>

<script setup>
import Tab from '@/components/Tab/Tab.tsx'
import TabPane from '@/components/Tab/TabPane.tsx'
import { ref, h } from 'vue'

const activeTab = ref('')
const tabData = ref([
  { name: 'tab1', label: '标签页1', component: h('div', null, '1') },
  { name: 'tab2', label: '标签页2', component: h('div', null, '2') },
  { name: 'tab3', label: '标签页3', component: h('div', null, '3') },
])

const handleTabChange = (tabName) => {
  activeTab.value = tabName
}
</script>

在该示例中，Tab 组件用于展示多个标签页，通过 data 属性传入标签页的数据数组，通过 v-model:active 实现对当前激活标签页的控制。标签页的内容通过默认插槽传入，每个标签页对应一个 TabPane 组件，并传入相应的组件作为内容。

属性

属性名	类型	默认值	必填	描述
data	Array	[]	否	标签页数据数组
size	String	''	否	标签页尺寸
active	String/Number	''	否	当前激活的标签页名称或索引
type	String	'list'	否	标签页类型

事件

事件名	参数	描述
tab	String	切换标签页时触发，参数为标签页的名称

插槽

名称	描述
默认	标签页内容

TabPane 标签页组件

该组件用于定义单个标签页。

属性

属性名	类型	默认值	必填	描述

| label | String | - | 是 | 标签页标题 |
| name | String | - | 是 | 标签页名称 |
| ... | - | - | - | 其他属性 |

插槽

名称	描述
默认	标签页内容