Tabs 标签页
选项卡切换组件，用于在不同的内容面板之间进行切换。
基础用法
通过 tabs 定义选项卡，v-model 绑定当前激活项的 key。
用户管理
角色管理
系统设置
当前面板：tab1
卡片类型
设置 type='card' 使用卡片样式标签页。
概览
配置
日志
分段控制器
设置 type='segment' 使用分段控制器样式，适合少数选项快速切换。
日
周
月
年
带图标
通过 icon 字段为标签页添加内置图标。
首页
搜索
设置
我的
不同尺寸
设置 size 使用不同大小的标签页。
选项一
选项二
选项三
选项一
选项二
选项三
选项一
选项二
选项三
可关闭 & 可新增
设置 closable 显示关闭按钮，设置 addable 显示新增按钮。
标签一
标签二
标签三
close 事件：
add 事件：
add 事件：
禁用标签
通过 disabled 字段禁用某个标签页。
可用标签
禁用标签
可用标签
左侧位置
设置 position='left' 使标签页在左侧展示。
个人信息
安全设置
通知偏好
账户管理
右侧位置
设置 position='right' 使标签页在右侧展示。
项目概览
成员管理
权限配置
滚动导航
当标签页数量超出容器宽度时，自动出现左右滚动按钮。
标签 1
标签 2
标签 3
标签 4
标签 5
标签 6
标签 7
标签 8
标签 9
标签 10
标签 11
标签 12
标签 13
标签 14
标签 15
标签 16
标签 17
标签 18
标签 19
标签 20
事件回调
监听 change 与 close 事件。
选项一
选项二
选项三
change 事件：
close 事件：
close 事件：
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | string | — | 当前激活的 key（必填，支持 v-model） |
tabs | TabItem[] | — | 选项卡数据（必填） |
type | 'line' | 'card' | 'segment' | 'line' | 标签页类型 |
size | 'sm' | 'md' | 'lg' | 'md' | 尺寸 |
position | 'top' | 'left' | 'right' | 'bottom' | 'top' | 标签位置 |
closable | boolean | false | 是否可关闭 |
addable | boolean | false | 是否可新增 |
animated | boolean | true | 是否启用切换动画 |
TabItem
| 字段 | 类型 | 默认值 | 说明 |
|---|---|---|---|
key | string | — | 唯一标识（必填） |
label | string | — | 标签文字（必填） |
icon | string | — | 内置图标名称（iconfont font_class） |
disabled | boolean | false | 是否禁用 |
closable | boolean | undefined | 是否可关闭（为 undefined 时跟随父级 closable） |
Events
| 事件名 | 类型 | 说明 |
|---|---|---|
update:modelValue | (key: string) => void | 激活项变化时触发（v-model） |
change | (key: string) => void | 切换标签页时触发 |
close | (key: string) => void | 关闭标签时触发 |
add | () => void | 点击新增按钮时触发 |