# UTabs 选项卡
- [示例](#示例)
- [基本用法](#基本用法)
- [动态数据渲染](#动态数据渲染)
- [路由](#路由)
- [默认显示和可关闭](#默认显示和可关闭)
- [外观](#外观)
- [禁用状态](#禁用状态)
- [可关闭](#可关闭)
- [标签页较多的情形](#标签页较多的情形)
- [插槽扩展](#插槽扩展)
- [UTabs API](#utabs-api)
- [Props/Attrs](#propsattrs)
- [Slots](#slots)
- [Events](#events)
- [Methods](#methods)
- [UTab API](#utab-api)
- [Props/Attrs](#propsattrs-2)
- [Slots](#slots-2)
**Selector**
选项卡切换组件，常用于平级区域大块内容的收纳和展现。
## 示例
### 基本用法
#### 使用 value 控制
``` html
模板内容
样式内容
逻辑内容
```
### 动态数据渲染
```vue
value+1
```
### 路由
``` html
```
### 默认显示和可关闭
``` html
模板内容
样式内容
逻辑内容
```
### 外观
#### 方形卡片（默认）
``` html
模板内容
样式内容
逻辑内容
```
#### 圆形卡片（默认）
``` html
模板内容
样式内容
逻辑内容
```
#### 线条导航
``` html
模板内容
样式内容
逻辑内容
```
#### 胶囊导航
``` html
模板内容
样式内容
逻辑内容
```
#### 文本形态
``` html
模板内容
样式内容
逻辑内容
```
#### 竖线分割
``` html
模板内容
样式内容
逻辑内容
模板内容
样式内容
逻辑内容
```
### 禁用状态
``` html
模板内容
样式内容
逻辑内容
模板内容
样式内容
逻辑内容
```
### 可关闭
``` html
模板内容
样式内容
逻辑内容
文档内容
资源内容
```
### 标签页较多的情形
``` vue
{{ title }} 的内容
添加
```
### 插槽扩展
- 在``上可以使用`extra`插槽，在右侧添加额外的内容；
- 在``上可以使用`title`插槽，自定义标签页的标题。
``` html
模板 1
模板内容
样式 6
样式内容
逻辑 3
逻辑内容
全选
```
## UTabs API
### Props/Attrs
| Prop/Attr | Type | Options | Default | Description |
| --------- | ---- | ------- | ------- | ----------- |
| show-scroll-buttons | string | `[object Object]`
`[object Object]`
`[object Object]` | `'auto'` | 是否显示标签滚动左右箭头按钮 |
| data-source | Array\ \| Function \| Object | | | 展示数据的输入源，可设置为集合类型变量（List）或输出参数为集合类型的逻辑。 |
| data-schema | schema | | | 数据源返回的数据结构的类型，自动识别类型进行展示说明 |
| title-field | string | | `'title'` | 数据源集合的元素，用于显示标签标题的属性 |
| value-field | string | | `'value'` | 数据源集合的元素，用于标识标签值的属性 |
| url-field | string | | `'url'` | 数据源集合的元素，用于标识当前打开的标签项 |
| content-field | string | | `''` | 数据源集合的元素，用于标识当前打开的标签项 |
| value.sync, v-model | any | | | 指当前打开标签的标签项 |
| router | boolean | | `false` | 开启后，选项卡可设置跳转页面 |
| closable-field | string | | `'closable'` | 设置标签项是否可关闭 |
| closable | boolean | | `false` | 设置标签是否可关闭 |
| readonly | boolean | | `false` | 正常显示，但禁止选择/输入 |
| disabled | boolean | | `false` | 置灰显示，且禁止任何交互（焦点、点击、选择、输入等） |
| appear | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'square'` | |
| size | string | `[object Object]`
`[object Object]`
`[object Object]` | `'normal'` | |
### Slots
#### (default)
插入``子组件。
#### extra
在标签右侧可以附加的组件。
#### title
#### content
### Events
#### @click
点击某一项后触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.value | any | 选中标签页的值 |
| $event.itemVM | UTab | 选中标签页实例 |
| senderVM | UTabs | 发送事件实例 |
#### @before-select
选择某一页前触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.value | any | 选中标签页的值 |
| $event.oldValue | any | 旧的值 |
| $event.itemVM | UTab | 选中标签页实例 |
| $event.oldVM | UTab | 旧的选中标签页实例 |
| $event.preventDefault | Function | 阻止选择流程 |
| senderVM | UTabs | 发送事件实例 |
#### @select
选择某一项后触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.value | any | 选中标签页的值 |
| $event.oldValue | any | 旧的值 |
| $event.itemVM | UTab | 选中标签页实例 |
| $event.oldVM | UTab | 旧的选中标签页实例 |
| senderVM | UTabs | 发送事件实例 |
#### @before-close
关闭某一页前触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.value | any | 待关闭标签页的值 |
| $event.oldValue | any | 旧的值 |
| $event.itemVM | UTab | 待关闭的标签页实例 |
| $event.preventDefault | Function | 阻止关闭流程 |
| senderVM | UTabs | 发送事件实例 |
#### @close
关闭某一页后触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.value | any | 关闭的标签页的值 |
| $event.oldValue | any | 旧的值 |
| $event.itemVM | UTabs | 关闭的标签页实例 |
| $event.preventDefault | Function | 阻止关闭后自动选择页的流程 |
| senderVM | UTabs | 发送事件实例 |
#### @before-load
加载前触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.preventDefault | Function | 阻止加载流程 |
| senderVM | UTableView | 发送事件实例 |
#### @load
加载后触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | null | 无 |
| senderVM | UTableView | 发送事件实例 |
Methods
#### reload()
重新加载数据
| Param | Type | Default | Description |
| ----- | ---- | ------- | ----------- |
## UTab API
### Props/Attrs
| Prop/Attr | Type | Options | Default | Description |
| --------- | ---- | ------- | ------- | ----------- |
| title | string | | | 标签页标题。 |
| href | string | | | 链接地址 |
| target | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'_self'` | 打开方式 |
| to | string, Location | | | 需要 router 为 true，与``的`to`属性相同。可以是一个字符串或者是描述目标位置的对象。 |
| replace | boolean | | `false` | 需要 router 为 true，与``的`replace`属性相同。如果为`true`，当点击时，会调用`router.replace()`而不是`router.push()`，于是导航后不会留下`history `记录。 |
| append | boolean | | `false` | 需要 router 为 true，与``的`append`属性相同。如果为`true`，则在当前路径后追加`to`的路径。 |
| exact | boolean | | `false` | 需要 router 为 true，与``的`exact`属性相同。是否与路由完全一致时才高亮显示。 |
| value | any | | | |
| linkType | string | `[object Object]` | `'destination'` | |
| hrefAndTo | string | | | |
| closable | boolean | | `false` | 设置标签是否可关闭 |
| showTabItem | boolean | | `true` | 显示状态分为“True(显示)/False(隐藏)”，默认为“显示” |
| disabled | boolean | | `false` | 置灰显示，且禁止任何交互（焦点、点击、选择、输入等） |
### Slots
#### (default)
该 tab 下的内容
#### title
自定义标题