muse-ui底部导航自定义图标和字体颜色

　　最近在鼓捣用vue.js进行混合APP开发,遍寻许久终于找到muse-ui这款支持vue的轻量级UI框架，竟还支持按需引入，甚合萝卜意！
　　底部导航的点击波纹特效也是让我无比惊喜，然而自定义图标和字体颜色却不是那么简单的。

　　官网上源码是这样的：

　　

　　属性title当然就是显示在底部菜单栏的各个菜单名称，icon就是各个菜单所用图标，我的app底部也是三个菜单。要自定义图标，我们首先要将icon置空icon=" ",注意中间的空格切不可省略。
剩下的就是改css

<style lang='less'>
//非选中态图标
a:nth-child(1) .mu-bottom-item-icon {
background-image: url(../../static/img/index.png) ;
background-repeat:no-repeat;
width:24px;
height:24px;
background-size:auto 24px;
}
a:nth-child(2) .mu-bottom-item-icon {
background-image: url(../../static/img/order.png) ;
background-repeat:no-repeat;
width:24px;
height:24px;
background-size:auto 24px;
}
a:nth-child(3) .mu-bottom-item-icon{
background-image: url(../../static/img/mine.png) ;
background-repeat:no-repeat;
width:24px;
height:24px;
background-size:auto 24px;
}
//选中态图标
a:nth-child(1).mu-bottom-item-active .mu-bottom-item-icon {
background-image: url(../../static/img/indexa.png) ;
background-repeat:no-repeat;
width:24px;
height:24px;
background-size:auto 24px;
}
a:nth-child(2).mu-bottom-item-active .mu-bottom-item-icon {
background-image: url(../../static/img/ordera.png) ;
background-repeat:no-repeat;
width:24px;
height:24px;
background-size:auto 24px;
}
a:nth-child(3).mu-bottom-item-active .mu-bottom-item-icon{
background-image: url(../../static/img/minea.png) ;
background-repeat:no-repeat;
width:24px;
height:24px;
background-size:auto 24px;
}
//字体颜色
.mu-bottom-item-text{
color:#999999
}
.mu-bottom-item-active .mu-bottom-item-text{
color:#2b2b2b;
}
</style>

至此ok!

转载于:https://www.cnblogs.com/growupup/p/9496459.html