## Tab 标签页

分隔内容上有关联但属于不同类别的数据集合。

### 基本用法

#### 默认选中第一项
tabs组件可以根据name来匹配选中项，默认选中第一个tab

```html
  <v-tabs>
    <v-tab-pane label="标签一" name="name1">内容 1</v-tab-pane>
    <v-tab-pane label="标签二" name="name2">内容 2</v-tab-pane>
    <v-tab-pane label="标签三" name="name3">内容 3</v-tab-pane>
  </v-tabs>
```

#### 指定默认选中项
tabs组件可以根据name来匹配选中项
```html
  <v-tabs name="name2">
    <v-tab-pane label="标签一" name="name1">内容 1</v-tab-pane>
    <v-tab-pane label="标签二" name="name2">内容 2</v-tab-pane>
    <v-tab-pane label="标签三" name="name3">内容 3</v-tab-pane>
  </v-tabs>
```

#### 吸顶tab
通过sticky属性可以开启粘性布局，粘性布局下，当 Tab 滚动到顶部时会自动吸顶
```html
  <v-tabs name="name2" sticky>
    <v-tab-pane label="标签一" name="name1">
      <v-button type="primary">hello</v-button>
    </v-tab-pane>
    <v-tab-pane label="标签二" name="name2">
      <v-icon name="comment" color="red"></v-icon><br>
      <v-icon name="comment" color="blue"></v-icon><br>
      <v-icon name="comment" color="pink"></v-icon><br>
      <v-icon name="comment" color="red"></v-icon><br>
      <v-icon name="comment" color="blue"></v-icon><br>
      <v-icon name="comment" color="pink"></v-icon><br>
      <v-icon name="comment" color="red"></v-icon><br>
      <v-icon name="comment" color="blue"></v-icon><br>
      <v-icon name="comment" color="pink"></v-icon><br>
      <v-icon name="comment" color="red"></v-icon><br>
      <v-icon name="comment" color="blue"></v-icon><br>
      <v-icon name="comment" color="pink"></v-icon><br>
    </v-tab-pane>
    <v-tab-pane label="标签三" name="name3">3</v-tab-pane>
  </v-tabs>
```

#### 禁用标签
在对应的v-tab上设置disabled属性即可。如果需要监听禁用事件，可以在v-tabs上监听disabled事件。
```html
  <v-tabs name="name1">
    <v-tab-pane label="标签一" name="name1">内容 1</v-tab-pane>
    <v-tab-pane label="标签二" name="name2" disabled>内容 2</v-tab-pane>
    <v-tab-pane label="标签三" name="name3">内容 3</v-tab-pane>
  </v-tabs>
```

#### 标签图标
在对应的v-tab上设置icon属性即可。icon可选值参看Icon组件。
```html
  <v-tabs name="name2">
    <v-tab-pane label="标签一" name="name1">内容 1</v-tab-pane>
    <v-tab-pane label="标签二" name="name2" icon="warn-empty">内容 2</v-tab-pane>
    <v-tab-pane label="标签三" name="name3">内容 3</v-tab-pane>
  </v-tabs>
```

#### 点击事件
可以在v-tabs上绑定click事件，事件传参为标签的props及pane对象
```html
  <v-tabs name="name1" @click="onClick">
    <v-tab-pane label="标签一" name="name1">内容 1</v-tab-pane>
    <v-tab-pane label="标签二" name="name2">内容 2</v-tab-pane>
    <v-tab-pane label="标签三" name="name3">内容 3</v-tab-pane>
  </v-tabs>
```

#### change事件
可以在v-tabs上绑定change事件，事件传参同click事件
```html
  <v-tabs name="name1" @change="onChange">
    <v-tab-pane label="标签一" name="name1">内容 1</v-tab-pane>
    <v-tab-pane label="标签二" name="name2">内容 2</v-tab-pane>
    <v-tab-pane label="标签三" name="name3">内容 3</v-tab-pane>
  </v-tabs>
```

#### disabled事件
可以在v-tabs上绑定diabled事件，可用于点击禁用标签时给出一些提示，事件传参同click事件
```html
  <v-tabs name="name1" @disabled="onDisabled">
    <v-tab-pane label="标签一" name="name1">内容 1</v-tab-pane>
    <v-tab-pane label="标签二" name="name2" disabled>内容 2</v-tab-pane>
    <v-tab-pane label="标签三" name="name3">内容 3</v-tab-pane>
  </v-tabs>
```

### Tabs Attributes

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| name  | 用来匹配激活的标签   | string   |    |  |
| sticky  | 是否吸顶    | boolean   |    | 无 |

### Tabs Events

| 参数      | 说明    | 参数     |
|---------- |-------- |---------- |
| click  | 点击标签时触发    | { index, label, name, disabled, icon, isActive, el }|
| change  | 当前激活的标签改变时触发    | 同click |
| disabled  | 点击被禁用的标签时触发  |  同click |

### Tab-pane Attributes

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| disabled  | 用来决定该标签是否被禁用    | boolean   |   | false |
| icon  | 用来设置标签图标    | string   |  参考Icon组件  | 无 |