vue-动态的实现点击tabbar后active活跃显示

Posted 2020-11-25 jjbw

在TabBarItem.vue文件中

　　<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",

　　　　　　computed:{

　　　　　　　　isActive(){

　　　　　　　　　　return this.$router.path.indexOf(this.path) !== -1

　　　　　　　　　　//当不存在当前路径时才会返回-1

　　　　　　　　}

　　　　　　},

　　　　　　methods:{

　　　　　　　　this.$router.push(this.path)

　　　　　　}

　　　　}

　　</script>