其他分享
首页 > 其他分享> > vue-动态的实现点击tabbar后active活跃显示

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

作者:互联网

在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,computed,TabBarItem,export,tabbar,router,active,path
来源: https://www.cnblogs.com/jjbw/p/12129691.html