## Tabs 标签页 分隔内容上有关联但属于不同类别的数据集合。 ### 基础用法 基础的、简洁的标签页。 :::demo Tabs 组件提供了选项卡功能,默认选中第一个标签页,你也可以通过 `value` 属性来指定当前选中的标签页。 ```html ``` ::: ### 选项卡样式 选项卡样式的标签页。 :::demo 只需要设置 `type` 属性为 `card` 就可以使选项卡改变为标签风格。 ```html ``` ::: ### 卡片化 卡片化的标签页。 :::demo 将`type`设置为`border-card`。 ```html 用户管理 配置管理 角色管理 定时任务补偿 ``` ::: ### 位置 可以通过 `tab-position` 设置标签的位置 :::demo 标签一共有四个方向的设置 `tabPosition="left|right|top|bottom"` ```html ``` ::: ### 自定义标签页 可以通过具名 `slot` 来实现自定义标签页的内容 :::demo ```html 我的行程 消息中心 角色管理 定时任务补偿 ``` ::: ### 动态增减标签页 增减标签页按钮只能在选项卡样式的标签页下使用 :::demo ```html {{item.content}} ``` ::: ### 自定义增加标签页触发器 :::demo ```html
add tab
{{item.content}} ``` ::: ### Tabs Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | value / v-model | 绑定值,选中选项卡的 name | string | — | 第一个选项卡的 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 或者返回 Promise 且被 reject,则阻止切换。 | Function(activeName, oldActiveName) | — | — | ### Tabs Events | 事件名称 | 说明 | 回调参数 | |---------- |-------- |---------- | | tab-click | tab 被选中时触发 | 被选中的标签 tab 实例 | | tab-remove | 点击 tab 移除按钮后触发 | 被删除的标签的 name | | tab-add | 点击 tabs 的新增按钮后触发 | — | | edit | 点击 tabs 的新增按钮或 tab 被关闭后触发 | (targetName, action) | ### Tab-pane Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | label | 选项卡标题 | string | — | — | | disabled | 是否禁用 | boolean | — | false | | name | 与选项卡绑定值 value 对应的标识符,表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值,如第一个选项卡则为'1' | | closable | 标签是否可关闭 | boolean | — | false | | lazy | 标签是否延迟渲染 | boolean | — | false | ### Tab-pane Slots | name | 说明 | |------|--------| | - | Tab-pane 的内容 | | label | Tab-pane 的标题内容 |