Vue 通用TabBar组件实战
一、概述
实现通用化的bBar组件
tab-bar
组件用于创建TabBar
1.可通过color
属性设置TabBar颜色;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=""
color="green"
hover-color='orange'
active-color="red"
>购物车</tab-bar-item>
<tab-bar-item
to="/profile"
iconfont-name=""
color="green"
hover-color='orange'
active-color="red"
>个人中心</tab-bar-item>
</tab-bar>