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>

上一篇:小程序自定义TabBar


下一篇:机器学习---python环境搭建