2020-08-13 11:47:56 +08:00
|
|
|
|
# Tabs <small>标签页</small>
|
|
|
|
|
|
|
|
|
|
|
|
:::tip
|
|
|
|
|
|
`Tabs` 组件需要配合 [`Tab`](/components/tab) 组件使用。
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
|
|
## 示例
|
|
|
|
|
|
|
|
|
|
|
|
### 尺寸
|
|
|
|
|
|
|
|
|
|
|
|
可选的 `ui` 尺寸属性值：`s`/`m`/`l`。
|
|
|
|
|
|
|
|
|
|
|
|
[[ demo src="/demo/tabs/size.vue" ]]
|
|
|
|
|
|
|
|
|
|
|
|
### 样式
|
|
|
|
|
|
|
|
|
|
|
|
设置 `ui` 为 `simple`/`strong` 来分别启用简单样式、加强样式。
|
|
|
|
|
|
|
|
|
|
|
|
[[ demo src="/demo/tabs/style.vue" ]]
|
|
|
|
|
|
|
|
|
|
|
|
### 路由模式
|
|
|
|
|
|
|
|
|
|
|
|
设置[`Tab`](/components/tab) 组件 `to` 属性来使用路由模式。
|
|
|
|
|
|
|
|
|
|
|
|
[[ demo src="/demo/tabs/route.vue" ]]
|
|
|
|
|
|
|
|
|
|
|
|
### 禁用状态
|
|
|
|
|
|
|
|
|
|
|
|
设置[`Tab`](/components/tab) 组件 `disabled` 属性来使选项卡处于禁用状态。
|
|
|
|
|
|
|
|
|
|
|
|
[[ demo src="/demo/tabs/disabled.vue" ]]
|
|
|
|
|
|
|
|
|
|
|
|
## API
|
|
|
|
|
|
|
|
|
|
|
|
### 属性
|
|
|
|
|
|
|
|
|
|
|
|
| 名称 | 类型 | 默认值 | 描述 |
|
|
|
|
|
|
| -- | -- | -- | -- |
|
|
|
|
|
|
| `ui` | `string=` | - | [^ui] |
|
|
|
|
|
|
| `active` | `string` | - | [^active] |
|
|
|
|
|
|
| `matches` | `function(Route, Route): boolean` | `tabs.matches` | [^matches] |
|
|
|
|
|
|
| `addable` | `boolean` | `false` | 是否可以增加标签。 |
|
|
|
|
|
|
| `max` | `number` | - | 可增加标签的上限值。 |
|
|
|
|
|
|
| `tip` | `string` | - | 提示文本。 |
|
|
|
|
|
|
|
|
|
|
|
|
^^^ui
|
|
|
|
|
|
预设样式。
|
|
|
|
|
|
|
|
|
|
|
|
+++枚举值
|
|
|
|
|
|
| 值 | 描述 |
|
|
|
|
|
|
| -- | -- |
|
|
|
|
|
|
| `s` | 小尺寸样式。 |
|
|
|
|
|
|
| `m` | 中尺寸样式。 |
|
|
|
|
|
|
| `l` | 大尺寸样式。 |
|
|
|
|
|
|
| `simple` | 简单样式。 |
|
|
|
|
|
|
| `strong` | 加强样式。 |
|
|
|
|
|
|
+++
|
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
|
|
^^^active
|
|
|
|
|
|
:::badges
|
|
|
|
|
|
`.sync`
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
|
|
表示当前哪个标签页处于激活状态。具体映射的值受[标签](/components/tab)的属性影响，优先级 `to` > `name`。
|
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
|
|
^^^matches
|
|
|
|
|
|
用于给内部的 [`Tab`](/components/tab) 组件设置统一的路由匹配逻辑。具体参见 [`Tab`](/components/tab) 组件的 [`to` 属性](/components/tab#属性)。
|
|
|
|
|
|
|
|
|
|
|
|
:::warning
|
|
|
|
|
|
当内部的 `Tab` 组件设置了 `matches` 属性，将会覆盖在 `Tabs` 组件上的 `matches` 属性。
|
|
|
|
|
|
:::
|
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
|
|
### 插槽
|
|
|
|
|
|
|
|
|
|
|
|
| 名称 | 描述 |
|
|
|
|
|
|
| -- | -- |
|
|
|
|
|
|
| `default` | 允许直接内联 `Tab` 组件。无默认内容。 |
|
|
|
|
|
|
| `panel` | 选项卡下方面板区域。 |
|
|
|
|
|
|
| `extra` | 位于标签页右侧的扩展区域。 |
|
|
|
|
|
|
| `tab-item` | [^tab-item] |
|
2020-10-26 16:13:55 +08:00
|
|
|
|
| `tab-label` | 标签选项卡文本区域，默认内容为选项卡文本。作用域参数同 `tab-item` 插槽。 |
|
2020-08-13 11:47:56 +08:00
|
|
|
|
|
|
|
|
|
|
^^^tab-item
|
|
|
|
|
|
标签选项卡区域，默认内容为选项卡对应的按钮/链接。作用域参数为标签属性描述对象。
|
|
|
|
|
|
|
|
|
|
|
|
+++参数详情
|
|
|
|
|
|
| 名称 | 类型 | 描述 |
|
|
|
|
|
|
| -- | -- | -- |
|
|
|
|
|
|
| `label` | `string` | 选项卡文本。 |
|
|
|
|
|
|
| `name` | `string` | 选项卡名称。 |
|
|
|
|
|
|
| `disabled` | `boolean=` | 选项卡是否禁用。 |
|
|
|
|
|
|
| `to` | `string` | 选项卡路由信息。 |
|
|
|
|
|
|
| `native` | `boolean` | 路由模式是否强制使用原生的 `<a>` 元素。 |
|
|
|
|
|
|
| `removable` | `boolean` | 是否可删除。 |
|
|
|
|
|
|
| `status` | `string` | 选项卡状态。 |
|
|
|
|
|
|
+++
|
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
|
|
### 事件
|
|
|
|
|
|
|
|
|
|
|
|
| 名称 | 描述 |
|
|
|
|
|
|
| -- | -- |
|
|
|
|
|
|
| `change` | 切换时触发。回调参数为 `(tab: Object)`，`tab` 与作用域插槽中的作用域参数一致。 |
|
|
|
|
|
|
| `add` | 点击添加按钮触发的事件，无回调参数。 |
|
|
|
|
|
|
| `remove` | 删除标签时触发的事件。回调参数为 `(tab: Object)`，`tab` 与作用域插槽中的作用域参数一致。 |
|
|
|
|
|
|
|
|
|
|
|
|
### 全局配置
|
|
|
|
|
|
|
|
|
|
|
|
| 名称 | 类型 | 默认值 | 描述 |
|
|
|
|
|
|
| -- | -- | -- | -- |
|
|
|
|
|
|
| `tabs.matches` | `function` | 见描述。 | [^config-matches] |
|
|
|
|
|
|
|
|
|
|
|
|
^^^config-matches
|
|
|
|
|
|
函数签名与 [`Tab`](/components/tab) 组件的 [`to` 属性](/components/tab#属性)相同。默认值为：
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
|
function (current, to) {
|
|
|
|
|
|
return current.fullPath === to.fullPath
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
|
|
### 图标
|
|
|
|
|
|
|
|
|
|
|
|
| 名称 | 描述 |
|
|
|
|
|
|
| -- | -- |
|
|
|
|
|
|
| `add` | 添加按钮。 |
|
|
|
|
|
|
| `remove` | 清除按钮。 |
|
|
|
|
|
|
| `prev` | 往左翻页按钮。 |
|
|
|
|
|
|
| `next` | 往右翻页按钮。 |
|
|
|
|
|
|
| `success` | 成功状态。 |
|
|
|
|
|
|
| `warning` | 警示状态。 |
|
|
|
|
|
|
| `info` | 普通信息状态。 |
|
|
|
|
|
|
| `error` | 错误状态。 |
|
