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