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