# Tabs 标签页 UPDATE

用于承载同一层级下不同页面或类别,方便用户在同一个框架下进行切换。

1.如果当前 v-model 为空或者不设置时,此时组件内部会强制默认为 0,该怎么做?

答:在 V2.2.10 版本时,新增属性 strict-value 来关闭。

# 代码演示

# API

# Tabs Attributes

参数 说明 类型 可选值 默认值 Version
value / v-model 绑定值,选中选项卡的 name String 第一个选项卡的 name
size 大小 String 'large' | 'medium' | 'small' 'medium'
type 风格类型 String 'card' | 'border-card-light' | 'border-card-dark' | 'menu' | 'menu-light'
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)
clear-icon 自定义删除图标的类名 string w-icon-close-solid
prev-icon 左边图标, 值为通用字体图标的 className String w-icon-triangle-left V2.2.1
next-icon 右边图标, 值为通用字体图标的 className String w-icon-triangle-right V2.2.1
clear-trigger 删除按钮触发方式 String 'hover' 'hover' v2.2.1
strict-value 当前 v-model 如果不设置或者空时,可以设置当前值为 true,此时不再强制默认为 0 Boolean true/false - v2.2.10
simple 是否是简单模式,即不带底边线,只适用于横向模式且 editable 为 false 情况下 Boolean true/false false v2.2.17

# Tabs Events

事件名称 说明 回调参数 Version
tab-click tab 被选中时触发 共两个参数,依次为:被选中的标签 tab 实例、event
tab-remove 点击 tab 移除按钮后触发 被删除的标签的 name
tab-add 点击 tabs 的新增按钮后触发
edit 点击 tabs 的新增按钮或 tab 被关闭后触发 共两个参数,依次为:当前标签的 name、操作 action
tab-contextmenu tab 被右击时 共两个参数,依次为:被右击的标签 tab 实例、event v2.0.0

# Tab-pane Attributes

参数 说明 类型 可选值 默认值 Version
label 选项卡标题 String
disabled 是否禁用 Boolean false
name 与选项卡绑定值 value 对应的标识符,表示选项卡别名 String/Number 该选项卡在选项卡列表中的顺序值,如第一个选项卡则为'1' V2.4.38
closable 标签是否可关闭 Boolean false
lazy 标签是否延迟渲染 Boolean false

# Tabs Slots

name 说明 Version
add 新增按钮 V2.4.32
上次更新: 3/20/2025, 9:11:30 AM