1. Vue 通用TabBar组件实战

Vue 通用TabBar组件实战

一、概述

实现通用化的bBar组件

1. tab-bar 组件用于创建TabBar
   1.可通过 color 属性设置TabBar颜色；
2. tab-bar-item 组件用户创建TabBar内的项目
   1.通过 to 属性设置跳转路径；
   2.通过 iconfont-name 属性设置图标；
   3.通过 color 属性设置颜色；
   4.通过 hover-color 属性设置鼠标悬停颜色；
   5.通过 active-color 属性设置激活颜色
   

二、使用概述

<tab-bar color="#f9f9f9">
    <tab-bar-item
            :to="{name:'home'}"
            iconfont-name="e747"
            color="green"
            hover-color='orange'
            active-color="red"
    >首页</tab-bar-item>
    <tab-bar-item
            :to="{name:'category'}"
            iconfont-name="e766;"
            color="green"
            hover-color='orange'
            active-color="red"
    >分类</tab-bar-item>
    <tab-bar-item
            to="/shopcart"
            iconfont-name="&#xe747;"
            color="green"
            hover-color='orange'
            active-color="red"
    >购物车</tab-bar-item>
    <tab-bar-item
            to="/profile"
            iconfont-name="&#xe773;"
            color="green"
            hover-color='orange'
            active-color="red"
    >个人中心</tab-bar-item>
</tab-bar>

三、项目下载地址

TabBar.zip