Mint UI tabbar 点击切换图片

徘徊边缘 提交于 2019-11-26 04:48:13

用到时发现 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);
    }
  }
};

是不是简单很多

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!