58 lines
1.9 KiB
Markdown
58 lines
1.9 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`](./link#props-to) 属性。如果 `to` 存在，则 [`name`](#props-name) 属性将被忽略。
|
||
|
||
:::tip
|
||
如果使用了 Vue Router，当前被激活的状态将与 `$route` 对象自动匹配，无需在 [`Tabs`](./tabs) 组件中手动控制 [`index`](./tabs#props-index) 或 [`active`](./tabs#props-active)。
|
||
:::
|
||
^^^
|
||
|
||
^^^matches
|
||
在使用了 Vue Router 且提供了 [`to`](#props-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`](./tabs#props-matches) 逻辑。
|
||
^^^
|
||
|
||
^^^status
|
||
选项卡状态。
|
||
|
||
+++枚举值
|
||
| 值 | 描述 |
|
||
| -- | -- |
|
||
| `success` | 成功状态。 |
|
||
| `warning` | 警示状态。 |
|
||
| `info` | 普通信息状态。 |
|
||
| `error` | 错误状态。 |
|
||
+++
|
||
^^^
|
||
|
||
### 插槽
|
||
|
||
| 名称 | 描述 |
|
||
| -- | -- |
|
||
| ``default`` | 默认插槽。 |
|
||
| ``item`` | 标签选项卡内容，包括对应的按钮/链接。 |
|
||
| ``label`` | 标签选项卡文本。 |
|