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