TabBar案例
一、APP.vue中的样式引用
<style>
@import "./assets/css/base.css"
</style>
base.css内容,无边框
bady {
padding: 0;
margin: 0;
}
二、tabbar的高度为49px
三、js判断tabbar是不是被激活的状态
this.$route.path.indexOf(this.path) !== -1
四、 激活及激活后文字颜色的判定
通过父组件向子组件传递颜色参数,子组件进行判定并修改
computed: {
isActive(){
return this.$route.path.indexOf(this.path) !== -1
},
textStyle(){
return this.isActive?{color: this.textClorer}:{color: ""}
}
},
五、为链接设置别名 webpack.base.conf.js
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
'assets': resolve('src/assets'),
'components': resolve('src/components'),
'router': resolve('src/router'),
'views': resolve('src/views')
}
},