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

标签：emc   vue   outer   path   item   路径   route   dex   文件中   

在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>

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

标签：emc   vue   outer   path   item   路径   route   dex   文件中   

原文地址：https://www.cnblogs.com/jjbw/p/12129691.html