Tabs 标签页

使用

分隔内容上有关联但属于不同类别的数据集合。

基础用法

基础的、简洁的标签页。

Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 value 属性来指定当前选中的标签页。

卡片风格的标签

你可以设置具有卡片风格的标签。

只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。

带有边框的卡片风格

你还可以设置标签页为带有边框的卡片

将 type 设置为 border-card。

标签位置的设置

可以通过 tab-position 设置标签的位置

标签一共有四个方向的设置 tabPosition="left|right|top|bottom"

自定义标签页的内容

可以通过具名插槽来实现自定义标签页的内容

动态增减标签页

增减标签页按钮只能在选项卡样式的标签页下使用

增加标签页触发器自定义

标签溢出

API

Tabs Props

参数名	描述	类型	默认值
model-value / v-model	绑定值，选中选项卡的 name，默认值是第一个tab的name	`string \| number`	`-`
type	风格类型	`enum`	`''`
closable	标签是否可关闭	`boolean`	`false`
addable	是否可新增选项卡	`boolean`	`false`
editable	标签是否同时可增加和关闭	`boolean`	`false`
tab-position	选项卡所在位置	`enum`	`top`
stretch	标签宽度是否自撑开	`boolean`	`false`
maxWidth	tab-position为left或right时有效，设置选项卡的最大宽度	`string \| number`	`-`
before-leave	切换标签之前的钩子函数，若返回false或者返回被reject的Promise，则阻止切换。	`Function`	`() => true`
show-hide-list	是否显示隐藏的选项卡列表	`boolean`	`true`

Tabs Events

事件名	描述	类型
tab-click	点击选项卡时触发	`Function`
tab-charge	activeName改变时触发	`Function`
tab-remove	点击tab移除按钮时触发	`Function`
tab-add	点击新增选项卡时触发	`Function`
edit	点击tab的新增或移除按钮后触发	`Function`
tab-click	点击选项卡时触发	`Function`

Tabs Slots

插槽名	描述	参数
default	默认插槽内容	`-`
add-icon	自定义添加按钮图标	`-`

TabPane Props

参数名	描述	类型	默认值
label	选项卡标题	`string`	`''`
disabled	是否禁用选项卡	`boolean`	`false`
name	与选项卡绑定值 value 对应的标识符，表示选项卡别名	`string \| number`	`-`
closable	标签是否可关闭	`boolean`	`false`
lazy	标签是否延迟渲染	`boolean`	`false`

TabPane Slots

插槽名	描述	参数
default	选项卡内容	`-`
label	选项卡标题	`-`

Tabs 标签页 ​

基础用法 ​

卡片风格的标签 ​

带有边框的卡片风格 ​

标签位置的设置 ​

自定义标签页的内容 ​

动态增减标签页 ​

增加标签页触发器自定义 ​

标签溢出 ​

API ​

Tabs Props ​

Tabs Events ​

Tabs Slots ​

TabPane Props ​

TabPane Slots ​