Tabs 标签页

概述

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

使用指南

在.vue中引入组件

<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'

示例

基本用法

<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>

<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