最近在鼓搗用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!