Mint UI tabbar 点击切换图片

最新推荐文章于 2021-06-15 13:54:29 发布

ars__qu

最新推荐文章于 2021-06-15 13:54:29 发布

阅读量995

点赞数

分类专栏： mint-ui 文章标签： mint-ui 前端 javascript

本文链接：https://blog.csdn.net/q516605308/article/details/90200346

版权

mint-ui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用到时发现 Mint UI在 tabbar 点击切换时 tab 栏图片是固定的没有 hover 状态，官方文档写的也很简单，搜了一下网上的发现都写的挺繁琐的，下面直接上代码

template

函数 toggleTab 里传字符串区分点在哪个 tab ，v-show 控制显示隐藏

<mt-tabbar fixed v-model="selected">
      <mt-tab-item id="个人中心" @click.native="toggleTab('C')">
        <img slot="icon" src="../assets/icon/act_task.png" v-show="!s.isC">
        <img slot="icon" src="../assets/icon/task.png" v-show="s.isC">
        个人中心
      </mt-tab-item>
      <mt-tab-item id="推荐" @click.native="toggleTab('R')">
        <img slot="icon" src="../assets/icon/act_rec.png" v-show="!s.isR">
        <img slot="icon" src="../assets/icon/rec.png" v-show="s.isR">
        推荐
      </mt-tab-item>
      <mt-tab-item id="下载" @click.native="toggleTab('D')">
        <img slot="icon" src="../assets/icon/act_down.png" v-show="!s.isD">
        <img slot="icon" src="../assets/icon/down.png" v-show="s.isD">
        下载
      </mt-tab-item>
      <mt-tab-item id="搜索" @click.native="toggleTab('S')">
        <img slot="icon" src="../assets/icon/act_search.png" v-show="!s.isS">
        <img slot="icon" src="../assets/icon/search.png" v-show="s.isS">
        搜索
      </mt-tab-item>
    </mt-tabbar>

js

export default {
  data() {
    return {
      s: { //分别对应四个 tab
        isC: !1,
        isR: !0,
        isD: !0,
        isS: !0
      },
      selected: "个人中心" //默认选中
    };
  },
  methods: {
    clear: function(state) { //清空状态
      for (var k in this.s) 
        this.$set(this.s, k, !0);
    },
    toggleTab: function(state) {  //更换图标
      this.clear(state); // 选中前先重置其他tab
      if (this.s["is" + state]) //如果没有选中则取反显示
      	this.$set(this.s, ["is" + state], !1);
    }
  }
};