1.8 KiB
1.8 KiB
Tab 标签
:::tip
Tab
组件需要配合 Tabs
组件使用。
:::
示例
见 Tabs
示例。
API
属性
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
label |
string |
- | 选项卡文本。 |
name |
string |
- | 选项卡名称。 |
disabled |
boolean= |
false |
选项卡是否禁用。 |
to |
`string | Object` | - |
matches |
function(Route, Route): boolean |
- | [^matches] |
native |
boolean |
false |
路由模式是否强制使用原生的 <a> 元素。 |
removable |
boolean |
是否可删除。 | |
status |
string |
- | [^status] |
^^^to
选项卡路由信息。类型见 Link
组件的同名属性。如果 to
存在,则 name
属性将被忽略。
:::tip
如果使用了 Vue Router,当前被激活的状态将与 $route
对象自动匹配,无需在 Tabs
组件中手动控制 index
或 active
。
:::
^^^
^^^matches
在使用了 Vue Router 且提供了 to
属性后,用于自定义判断路由当前激活 Tab
的逻辑。参数列表为 (current: Route, to: Route)
。current
与 to
参数均为 Vue Router 的 Route
类型对象。默认使用上层 Tabs
组件的 matches
逻辑。
^^^
^^^status 选项卡状态。
+++枚举值
值 | 描述 |
---|---|
success |
成功状态。 |
warning |
警示状态。 |
info |
普通信息状态。 |
error |
错误状态。 |
+++ | |
^^^ |
插槽
名称 | 描述 |
---|---|
default |
默认插槽。 |
item |
标签选项卡内容,包括对应的按钮/链接。 |
label |
标签选项卡文本。 |