分隔内容上有关联但属于不同类别的数据集合。
基础用法#
基础的、简洁的标签页。
Tabs 组件提供了选项卡功能， 默认选中第一个标签页，你也可以通过 value 属性来指定当前选中的标签页。
User
Config
Role
Task
User
卡片风格的标签#
你可以设置具有卡片风格的标签。
只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。
User
Config
Role
Task
User
带有边框的卡片风格#
你还可以设置标签页为带有边框的卡片
将 type 设置为 border-card。
User
Config
Role
Task
User
标签位置的设置#
可以通过 tab-position 设置标签的位置
标签一共有四个方向的设置 tabPosition="left|right|top|bottom"
toprightbottomleft
User
Config
Role
Task
User
自定义标签页的内容#
可以通过具名插槽来实现自定义标签页的内容
Route
Config
Role
Task
Route
动态增减标签页#
增减标签页按钮只能在选项卡样式的标签页下使用
Tab 1
Tab 2
Tab 2 content
添加按钮自定义图标2.4.0#
Tab 1
Tab 2
Tab 2 content
增加标签页触发器自定义#
add tab
Tab 1
Tab 2
Tab 2 content
Tabs 属性#
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
| model-value / v-model | 绑定值，选中选项卡的 name | string / number | — | 第一个选项卡的 name |
| type | 风格类型 | string | card/border-card | — |
| closable | 标签是否可关闭 | boolean | — | false |
| addable | 标签是否可增加 | boolean | — | false |
| editable | 标签是否同时可增加和关闭 | boolean | — | false |
| tab-position | 选项卡所在位置 | string | top/right/bottom/left | top |
| stretch | 标签的宽度是否自撑开 | boolean | - | false |
| before-leave | 切换标签之前的钩子函数， 若返回 false 或者返回被 reject 的 Promise，则阻止切换。 |
Function(activeName, oldActiveName) | — | — |
Tabs 事件#
| 事件名 | 说明 | 回调参数 |
| tab-click | tab 被选中时触发 | (pane: TabsPaneContext, ev: Event) |
| tab-change | activeName 改变时触发 |
(name: TabPaneName) |
| tab-remove | 点击 tab 移除按钮时触发 | (name: TabPaneName) |
| tab-add | 点击 tab 新增按钮时触发 | — |
| edit | 点击 tab 的新增或移除按钮后触发 | (paneName: TabPaneName | undefined, action: 'remove' | 'add') |
Tabs 插槽#
| 插槽名 | 说明 | 子标签 |
| - | 默认插槽 | Tab-pane |
| addIcon 2.4.0 | 自定义添加按钮图标 | - |
Tab-pane 属性#
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
| label | 选项卡标题 | string | — | — |
| disabled | 是否禁用 | boolean | — | false |
| name | 与选项卡绑定值 value 对应的标识符，表示选项卡别名 | string / number | — | 该选项卡在选项卡列表中的序数值，第一个选项卡为 '0' |
| closable | 标签是否可关闭 | boolean | — | false |
| lazy | 标签是否延迟渲染 | boolean | — | false |
Tab-pane 插槽#
| 插槽名 | 说明 |
| - | Tab-pane 的内容 |
| label | Tab-pane 的标题内容 |
