标签页 Tabs

自研标签页，数据驱动渲染，具名插槽承载面板内容。

Props

属性	类型	默认值	说明
modelValue	string	''	当前激活面板（v-model）
tabs	{ name, label, disabled? }[]	[]	标签页列表

事件

事件	参数	说明
update:modelValue	string	切换面板时触发

Slots

插槽	说明
[name]	以标签 name 命名的具名插槽，承载面板内容

示例

<template>
  <Tabs v-model="active" :tabs="tabs">
    <template #basic>基础配置内容</template>
    <template #advance>高级配置内容</template>
  </Tabs>
</template>

<script setup>
import { ref } from 'vue'
const active = ref('basic')
const tabs = [
  { name: 'basic', label: '基础配置' },
  { name: 'advance', label: '高级配置', disabled: true },
]
</script>