Tabs 标签页

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

基础用法

基础的、简洁的标签页。

卡片风格的标签

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

带有边框的卡片风格

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

标签位置的设置

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

自定义标签页的内容

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

动态增减标签页

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

自定义增加标签页触发器

Tabs 属性

属性说明类型可选值默认值
model-value / v-model绑定值,选中选项卡的 namestring / number第一个选项卡的 name
type风格类型stringcard/border-card
closable标签是否可关闭booleanfalse
addable标签是否可增加booleanfalse
editable标签是否同时可增加和关闭booleanfalse
tab-position选项卡所在位置stringtop/right/bottom/lefttop
stretch标签的宽度是否自撑开boolean-false
before-leave切换标签之前的钩子函数, 若返回 false 或者返回被 reject 的 Promise,则阻止切换。Function(activeName, oldActiveName)

Tabs 事件

事件名说明回调参数
tab-clicktab 被选中时触发(pane: TabsPaneContext, ev: Event)
tab-changeactiveName 改变时触发(name: TabPanelName)
tab-remove点击 tab 移除按钮时触发(name: TabPanelName)
tab-add点击 tab 新增按钮时触发
edit点击 tab 的新增或移除按钮后触发(paneName: TabPanelName | undefined, action: 'remove' | 'add')

Tabs 插槽

插槽名说明子标签
-默认插槽Tab-pane

Tab-pane 属性

属性说明类型可选值默认值
label选项卡标题string
disabled是否禁用booleanfalse
name与选项卡绑定值 value 对应的标识符,表示选项卡别名string / number该选项卡在选项卡列表中的序数值,第一个选项卡为 '0'
closable标签是否可关闭booleanfalse
lazy标签是否延迟渲染booleanfalse

Tab-pane 插槽

插槽名说明
-Tab-pane 的内容
labelTab-pane 的标题内容

源代码

组件文档

贡献者