<template>
<div class="tab-bar-item" @click="itemClick">
<div v-if="!isActive"><slot name="item-icon"></slot></div>
<div v-else><slot name="item-icon-active"></slot></div>
<div :class="{active: isActive}"><slot name="item-text"></slot></div>
</div>
</template>
<script>
export default {
name: "TabBarItem",
props:{
path: String
},
data(){
return{
isActive: false
}
},
methods: {
itemClick(index){
this.$router.push(this.path).catch(err => {});
}
}
}
</script>
<style>
.tab-bar-item{
flex: 1;
text-align: center;
height: 49px;
}
.tab-bar-item img{
width: 20px;
height: 20px;
}
.active{
color: red;
}
</style>
标签：bar,String,height,参数,tab,组件,path From： https://www.cnblogs.com/ixtao/p/16920427.html