## Tabbar 标签栏

位于 APP 底部，方便用户在不同功能模块之间进行快速切换。

#### 基础用法
最基础的用法，默认固定在视口的底部, icon可选值参考Icon。

```html
  <v-tabbar
    :active="0">
    <v-tabbar-item icon="date">日历1</v-tabbar-item>
    <v-tabbar-item icon="comment">消息1</v-tabbar-item>
    <v-tabbar-item icon="setting">设置1</v-tabbar-item>
  </v-tabbar>
```

#### 不固定到底部

设置fixed为false，可取消固定在底部

```html
  <v-tabbar
    :active="1"
    :fixed="false">
    <v-tabbar-item icon="date">日历2</v-tabbar-item>
    <v-tabbar-item icon="comment">消息2</v-tabbar-item>
    <v-tabbar-item icon="setting">设置2</v-tabbar-item>
  </v-tabbar>
```

#### 自定义图片

很多时候组件库提供的Icon并不满足我们的需求，我们需要自定义的图片。参考以下案例：

```html
  <v-tabbar
    :active="active">
    <v-tabbar-item>
      <img
        slot="icon"
        slot-scope="tabbarItem"
        :src="tabbarItem.data ? icon.active : icon.normal"
      >
      自定义
    </v-tabbar-item>
    <v-tabbar-item icon="comment">消息3</v-tabbar-item>
    <v-tabbar-item icon="setting">京东</v-tabbar-item>
  </v-tabbar>
```

```javascript
export default {
  data() {
    return {
      active: 1,
      icon: {
        normal: 'https://user-images.githubusercontent.com/18346513/43684470-4e5c8bc8-98d3-11e8-9488-c73c8f33e9d6.png',
        active: 'https://user-images.githubusercontent.com/18346513/43684471-4eb57d64-98d3-11e8-9abc-ba3857789c9b.png'
      }
    };
  },
};
```

#### 显示提示（小红点，数字提示）

设置fixed为false，可取消固定在底部

```html
  <v-tabbar
    :active="1">
    <v-tabbar-item icon="date">日历3</v-tabbar-item>
    <v-tabbar-item icon="comment" dot>消息3</v-tabbar-item>
    <v-tabbar-item icon="setting" info="99+">设置3</v-tabbar-item>
  </v-tabbar>
```

#### 点击跳转

很多时候，我们可能希望用户点击某个Tab，跳转到我们指定的Url。

```html
  <v-tabbar
    :active="1">
    <v-tabbar-item icon="date">日历3</v-tabbar-item>
    <v-tabbar-item icon="comment">消息3</v-tabbar-item>
    <v-tabbar-item icon="setting" url="http://www.jd.com">京东</v-tabbar-item>
  </v-tabbar>
```

### Tabbar Attributes

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| v-model  | 当前选中标签的索引   | number   | -   | 无 |
| fixed  | 是否固定在底部    | boolean   |  -  | true |

### Tabbar Events

| 参数      | 说明    | 参数     |
|---------- |-------- |---------- |
| change  | 切换标签时触发    | active: 当前选中标签 |

### Tabbar-item Attributes

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| icon  | 图标名称 (可选值见 Icon 组件)    | string   |  参考Icon组件  | 无 |
| dot  | 	是否显示小红点    | boolean   |  -  | false |
| info  | 图标右上角提示信息    | string   |  -  | 无 |
| url  | 	跳转链接    | string   |  -  | 无 |