mint-ui tabbar切換 ,顯示圖片的辦法
阿新 • • 發佈:2018-12-10
關於 mintui 切換圖示樣式顯示 ( 僅限於圖片切換!方法很笨 我實在想不出辦法了),查了很多資料,個人感覺太複雜。 不得不吐槽下mintui , 個人感覺框架很不完善 ,要啥沒啥 ! 進入主題 !
在上下程式碼,直接複製貼上省事!
<mt-tabbar v-model="tabItemActive" fixed> <mt-tab-item id="pageIndex" > <img slot="icon" src="../../src/image/home.png" v-show="show_img"> <img slot="icon" src="../../src/image/home1.png" v-show="img_show" > 首頁 </mt-tab-item> <mt-tab-item id="pageProduct" > <img slot="icon" src="../../src/image/shop.png" v-show="show_img1"> <img slot="icon" src="../../src/image/shop1.png" v-show="img_show1"> 商城 </mt-tab-item> <mt-tab-item id="saoma" > <img slot="icon" src="../../src/image/sas.png" v-show="show_img2"> <img slot="icon" src="../../src/image/sas1.png" v-show="img_show2"> 掃碼付款 </mt-tab-item> <mt-tab-item id="pageArticle" > <img slot="icon" src="../../src/image/user.png" v-show="show_img3"> <img slot="icon" src="../../src/image/user1.png" v-show="img_show3"> 個人中心 </mt-tab-item> </mt-tabbar> ------------------------------------//分割線 show_img: true, img_show: false, show_img1: false, img_show1: true, show_img2: false, img_show2: true, show_img3: false, img_show3: true, /* ------- */ tabItemActive: "pageIndex", -----------------------------------------//在分割 watch: { tabItemActive(val, old) { switch (val) { case "pageIndex": this.show_img = true; this.show_img1 = false; this.show_img2 = false; this.show_img3 = false; this.img_show = false; this.img_show1 = true; this.img_show2 = true; this.img_show3 = true; break; case "pageProduct": this.show_img = false; this.show_img1 = true; this.show_img2 = false; this.show_img3 = false; this.img_show = true; this.img_show1 = false; this.img_show2 = true; this.img_show3 = true; break; case "saoma": this.show_img = false; this.show_img1 = false; this.show_img2 = true; this.show_img3 = false; this.img_show = true; this.img_show1 = true; this.img_show2 = false; this.img_show3 = true; break; case "pageArticle": this.show_img = false; this.show_img1 = false; this.show_img2 = false; this.show_img3 = true; this.img_show = true; this.img_show1 = true; this.img_show2 = true; this.img_show3 = false; break; default: break; } } }, ------------------------------------//完畢 第一次發部落格 ,有不對之處,還請指正