首页 > 其他 > 详细

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

时间:2020-01-01 20:21:03      阅读:300      评论:0      收藏:0      [点我收藏+]

在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活跃显示

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!