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