Tabs 标签页
分隔内容上有关联但属于不同类别的数据集合。融合了 Element Plus、Naive UI、Ant Design 各家之长，并首创了 Segment 分段器风格与切换钩子。
基础用法
基础的、简洁的标签页。通过 v-model 绑定当前激活的标签名。
用户管理
基础用法
触发器自定义
通过 trigger 属性指定标签切换的触发方式。可选值：click（默认）、hover。
鼠标移入标签即可切换
触发器自定义
卡片风格
设置 type="card" 可以使标签改变为标签卡片样式。
用户管理
卡片风格
带边框卡片
设置 type="border-card" 呈现带边框的卡片样式。
用户管理
带边框卡片
分段器风格
设置 type="segment" 呈现 iOS 风格的分段器效果，适合用于视图切换。
日视图内容
分段器风格
标签位置
通过 tab-position 设置标签的位置。可选值：top、right、bottom、left。
用户管理内容
标签位置
自定义指示器样式
默认指示器为短样式（40px）居中显示。通过 indicator-width、indicator-height 控制指示器尺寸，设置为 auto 可让指示器铺满标签。通过 active-color、inactive-color 自定义颜色。
用户管理内容
自定义指示器样式
标签撑满
设置 stretch 可以使标签撑满容器宽度。
用户管理内容
标签撑满
动态增减标签
设置 editable（等同于 closable + addable）使标签可动态增减。
Tab 1 Content
动态增减标签
自定义添加触发器
通过外部按钮触发添加标签页，而不使用组件内置的 + 按钮。设置 :addable="false" 隐藏内置按钮，然后自行调用添加逻辑。
Tab 1 Content
自定义添加触发器
切换前钩子
通过 before-leave 钩子函数控制标签切换。返回 false 或 Promise.reject 可阻止切换。
用户管理
切换前钩子
延迟渲染
设置 lazy 可以延迟渲染标签内容，只有在首次激活时才会渲染。
即时加载的内容
延迟渲染
在 Nuxt 中使用
组件已完美适配 Nuxt 3，支持自动导入与 SSR。
Content 1
Nuxt 适配
API
Tabs Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值，当前激活的标签名 | string | number | '' |
| type | 标签类型 | 'line' | 'card' | 'border-card' | 'segment' | 'line' |
| tab-position | 标签位置 | 'top' | 'right' | 'bottom' | 'left' | 'top' |
| closable | 是否可关闭 | boolean | false |
| addable | 是否可新增 | boolean | false |
| editable | 是否可编辑（同时可关闭和新增） | boolean | false |
| draggable | 是否可拖拽排序 | boolean | false |
| before-leave | 切换前钩子，返回 false 可阻止切换 | (newName, oldName) => boolean | Promise<boolean> | — |
| stretch | 标签是否撑满容器 | boolean | false |
| nav-class | 标签栏自定义类名 | string | '' |
| content-class | 内容区自定义类名 | string | '' |
| indicator-width | 指示器宽度（水平方向为长度，垂直方向为粗细），设为 auto 可铺满标签 | string | ''（CSS 变量默认 40px） |
| indicator-height | 指示器高度（垂直方向为长度，水平方向为粗细），设为 auto 可铺满标签 | string | ''（CSS 变量默认 20px） |
| active-color | 选中态颜色（文字和指示器） | string | '' |
| inactive-color | 未选中态颜色 | string | '' |
| trigger | 触发方式 | 'click' | 'hover' | 'click' |
Tabs Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| tab-click | 点击标签时触发 | (pane: TabPaneConfig, ev: Event) => void |
| tab-change | 激活标签改变时触发 | (name: string | number) => void |
| tab-remove | 点击关闭按钮时触发 | (name: string | number) => void |
| tab-add | 点击新增按钮时触发 | () => void |
| tab-drag-end | 拖拽结束时触发 | (names: (string | number)[]) => void |
Tabs Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
| default | TabPane 内容 | — |
| label | 自定义标签标题 | { pane: TabPaneConfig } |
| add-icon | 自定义新增按钮图标 | — |
Tabs Exposes
通过 ref 可以获取 Tabs 实例并调用以下方法：
| 方法名 | 说明 | 类型 |
|---|---|---|
| addTab | 触发添加标签页事件（需配合 @tab-add 使用） | () => void |
| setActiveTab | 激活指定标签 | (name: string | number) => void |
| activeTab | 当前激活的标签名（响应式） | Ref<string | number> |
TabPane Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 唯一标识（必填） | string | number | — |
| label | 标签标题 | string | '' |
| disabled | 是否禁用 | boolean | false |
| closable | 是否可关闭（覆盖 Tabs 的设置） | boolean | undefined |
| lazy | 是否延迟渲染（首次激活后渲染） | boolean | false |
| icon | 图标类名 | string | '' |
TabPane Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
| default | 标签内容 | — |
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-tabs-header-height | 标签栏高度 | 40px |
--yh-tabs-active-color | 激活态颜色 | var(--yh-color-primary) |
--yh-tabs-text-color | 文字颜色 | var(--yh-text-color-primary) |
--yh-tabs-disabled-color | 禁用态颜色 | var(--yh-text-color-disabled) |
--yh-tabs-border-color | 边框颜色 | var(--yh-border-color-light) |
--yh-tabs-indicator-width | 指示器宽度（水平布局） | 40px |
--yh-tabs-indicator-height | 指示器高度（垂直布局） | 20px |