用到时发现 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);
}
}
};
是不是简单很多
来源:CSDN
作者:ars__qu
链接:https://blog.csdn.net/q516605308/article/details/90200346