> For the complete documentation index, see [llms.txt](https://iview-mpvue.gitbook.io/iview-mpvue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://iview-mpvue.gitbook.io/iview-mpvue/dao-hang/tabs-biao-qian-ye.md).

# Tabs 标签页

## 概述

用于让用户在不同的视图中进行切换。

## 使用指南

在.vue中引入组件

```javascript
<script>
    import iTabs from 'iview-mpvue/dist/components/tabs/tabs'
    import iTab from 'iview-mpvue/dist/components/tab/tab'
    export default {
        components: {
            'i-tabs': iTabs,
            'i-tab': iTab
        }
    }
</script>
```

在main.js中引入样式文件

```
import 'iview-mpvue/dist/components/tabs/style/css'
import 'iview-mpvue/dist/components/tab/style/css'
```

## 示例

```markup
基本用法

<i-tabs v-model="current" v-on:change="handleChange">
    <i-tab item-key="tab1" title="选项1"></i-tab>
    <i-tab item-key="tab2" title="选项2"></i-tab>
    <i-tab item-key="tab3" title="选项3"></i-tab>
</i-tabs>

自定义主题色

<i-tabs v-model="current" color="#f759ab" v-on:change="handleChange">
    <i-tab item-key="tab1" title="选项1"></i-tab>
    <i-tab item-key="tab2" title="选项2"></i-tab>
    <i-tab item-key="tab3" title="选项3"></i-tab>
</i-tabs>

徽标

<i-tabs v-model="current" v-on:change="handleChange">
    <i-tab item-key="tab1" title="选项1" count="3"></i-tab>
    <i-tab item-key="tab2" title="选项2"></i-tab>
    <i-tab item-key="tab3" title="选项3" dot="true"></i-tab>
</i-tabs>

滚动

<i-tabs v-model="current" scroll="true" v-on:change="handleChangeScroll">
    <i-tab item-key="tab1" title="选项1"></i-tab>
    <i-tab item-key="tab2" title="选项2"></i-tab>
    <i-tab item-key="tab3" title="选项3"></i-tab>
    <i-tab item-key="tab4" title="选项4"></i-tab>
    <i-tab item-key="tab5" title="选项5"></i-tab>
    <i-tab item-key="tab6" title="选项6"></i-tab>
    <i-tab item-key="tab7" title="选项7"></i-tab>
    <i-tab item-key="tab8" title="选项8"></i-tab>
    <i-tab item-key="tab9" title="选项9"></i-tab>
</i-tabs>
```

```javascript
<script>
    export default {
        ...
        methods: {
            handleChange(val) {
                // todo
            },
            handleChangeScroll(val) {
                // todo
            }
        }
    }
</script>
```

## API

Tabs properties

| 属性      | 说明             | 类型      | 默认值   |
| ------- | -------------- | ------- | ----- |
| i-class | 自定义 class 类名   | String  | -     |
| current | 当前所在的标签的 key 值 | String  | -     |
| color   | 主题色            | String  | -     |
| scroll  | 是否开启横向滚动       | Boolean | false |
| fixed   | 是否固定在底部        | Boolean | false |

Tabs events

| 事件名         | 说明      | 返回值      |
| ----------- | ------- | -------- |
| v-on:change | 切换标签时触发 | newValue |

Tab properties

| 属性      | 说明           | 类型      | 默认值   |
| ------- | ------------ | ------- | ----- |
| i-class | 自定义 class 类名 | String  | -     |
| key     | 标签的唯一标识      | String  | -     |
| title   | 名称           | String  | -     |
| dot     | 是否显示小红点      | Boolean | false |
| count   | 徽标数          | Number  | 0     |