标签页

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

基础用法

基础的、简洁的标签页。

卡片风格

卡片化的标签页。

带边框的卡片

带边框的卡片化标签页。

标签页位置

你可以通过 tab-position 属性来设置标签页的位置。

自定义标签页

您可以使用具名插槽来自定义标签页的内容。

增加和关闭标签页

只有卡片类型的标签页支持添加和关闭选项。

自定义添加按钮图标 2.4.0

自定义新增标签页的触发器

默认值 2.11.9

Tabs API

Tabs 属性

名称	描述	类型	默认值
model-value / v-model	绑定值，选中选项卡的 name，默认值为第一个选项卡的 name	`string` / `number`	—
default-value 2.11.9	初始时应处于活动状态的标签页的值。（避免初始过渡）	`string` / `number`	—
type	标签页的类型	`枚举`	''
可关闭	标签页是否可关闭	`boolean`	false
可添加	标签页是否可增加	`boolean`	false
可编辑	标签页是否可增加和关闭	`boolean`	false
tab-position	选项卡所在位置	`枚举`	上
stretch	标签的宽度是否自适应容器	`boolean`	false
before-leave	切换标签之前的钩子，若返回 `false` 或者返回 `Promise` 且被 reject，则阻止切换	`Function`	() => true
tabindex 2.11.7	标签页的 tabindex	`string` / `number`	0

Tabs 事件

名称	描述	参数
tab-click	当 tab 被选中时触发	`Function`
tab-change	当 `activeName` 改变时触发	`Function`
tab-remove	点击 tab 移除按钮后触发	`Function`
tab-add	点击 tab 新增按钮后触发	`Function`
edit	点击 tab 新增按钮或 tab 移除按钮后触发	`Function`

Tabs 插槽

名称	描述	子标签
default	自定义默认内容	标签页内容
add-icon 2.5.4	自定义添加按钮图标	—
addIcon 2.4.0 已弃用	自定义添加按钮图标	—

Tabs 暴露的属性

名称	描述	类型
currentName	当前活动的标签页名称	`object`
tabNavRef 2.9.10	tab-nav 组件实例	`object`

Tab-nav API

Tab-nav 暴露的属性

名称	描述	类型
scrollToActiveTab	滚动到活动的标签页	`Function`
removeFocus	移除焦点状态	`Function`
tabListRef 2.9.10	el_tabs__nav html 元素	`object`
tabBarRef 2.9.10	el_tabs__nav bar 实例	`object`

Tab-pane API

Tab-pane 属性

名称	描述	类型	默认值
label	选项卡标题	`string`	''
disabled	该选项卡是否被禁用	`boolean`	false
名称	与选项卡绑定值 value 对应的标识符，表示选项卡别名，该选项卡在选项卡列表中的顺序值，如第一个选项卡为'0'	`string` / `number`	—
可关闭	标签页是否可关闭	`boolean`	false
lazy	标签页是否延迟渲染	`boolean`	false

Tab-pane 插槽

名称	描述
default	标签页内容
label	标签页标题

类型声明

显示声明

type TabBarInstance = InstanceType<typeof TabBar> & {
  /** @description tab root html element */
  ref: barRef
  /** @description method to manually update tab bar style */
  update
}