TabBar 标签栏

概述

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

使用指南

在.vue中引入组件

<script>
    import iTabBar from 'iview-mpvue/dist/components/tab-bar/tab-bar'
    import iTabBarItem from 'iview-mpvue/dist/components/tab-bar-item/tab-bar-item'
    export default {
        components: {
            'i-tab-bar': iTabBar,
            'i-tab-bar-item': iTabBarItem
        }
    }
</script>

在main.js中引入样式文件

import 'iview-mpvue/dist/components/tab-bar/style/css'
import 'iview-mpvue/dist/components/tab-bar-item/style/css'

示例

基本用法

<i-tab-bar v-model="current" @change="handleChange">
    <i-tab-bar-item item-key="homepage" icon="homepage" current-icon="homepage_fill" title="Home"></i-tab-bar-item>
    <i-tab-bar-item item-key="group" icon="group" current-icon="group_fill" title="Friends"></i-tab-bar-item>
    <i-tab-bar-item item-key="remind" icon="remind" current-icon="remind_fill" count="3" title="Notice"></i-tab-bar-item>
    <i-tab-bar-item item-key="mine" icon="mine" current-icon="mine_fill" dot="true" title="My"></i-tab-bar-item>
</i-tab-bar>

自定义主题色

<i-tab-bar v-model="current" color="#f759ab" @change="handleChange">
    <i-tab-bar-item item-key="homepage" icon="homepage" current-icon="homepage_fill" title="首页"></i-tab-bar-item>
    <i-tab-bar-item item-key="group" icon="group" current-icon="group_fill" title="朋友"></i-tab-bar-item>
    <i-tab-bar-item item-key="remind" icon="remind" current-icon="remind_fill" title="通知"></i-tab-bar-item>
    <i-tab-bar-item item-key="mine" icon="mine" current-icon="mine_fill" title="我的"></i-tab-bar-item>
</i-tab-bar>

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

API

TabBar properties

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

TabBar events

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

TabBarItem properties

属性	说明	类型	默认值
i-class	自定义 class 类名	String	-
icon	图标	String	-
current-icon	当前面板被选中时的图标	String	-
img	自定义图片 url	String	-
current-img	当前面板被选中时的自定义图片 url	String	-
key	标签的唯一标识	String	-
title	名称	String	-
dot	是否显示小红点	Boolean	false
count	徽标数	Number	0