Vant的Tabbar標(biāo)簽欄引入自定義圖標(biāo)方式
更新時間：2022年04月28日 08:41:12 作者：小白靜
這篇文章主要介紹了Vant的Tabbar標(biāo)簽欄引入自定義圖標(biāo)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Tabbar標(biāo)簽欄引入自定義圖標(biāo)
**使用*van-tabbar*組件**
*v-model*綁定的是對應(yīng)的Tabbar下標(biāo)*active-color*是未選中的文字顏色*inactive-color*是已選中的文字顏色**route**這個要特別注意，我就是在這踩了坑，我沒有加這個參數(shù)，但是能正常跳轉(zhuǎn)路由，但是圖標(biāo)選中會出現(xiàn)問題，每次都需要雙擊。一直以為是插槽的問題，后面才發(fā)現(xiàn)官方api的這個參數(shù)
*van-tabbar-item*每一個Tab標(biāo)簽 #icons ?自定義圖標(biāo)的插槽 props.active ? 插槽的值，點擊后為true，初始為false
<van-tabbar v-model="active" active-color="#42A46F" inactive-color="#999999" @change="onChange" route>
<van-tabbar-item to="/myorder">
?? ??? ??? ??? ?<span>我的預(yù)約</span>
?? ??? ??? ??? ?<template #icon="props">
?? ??? ??? ??? ??? ?<van-image :src="props.active ? require('@mobile/assets/images/index/aftericon1.png') : require('@mobile/assets/images/index/icon1.png')" />
?? ??? ??? ??? ?</template>
?? ??? ??? ?</van-tabbar-item>
</van-tabbar>vant自義定Tabbar圖標(biāo)和顏色
1.index代碼：
<template> ? <div class="app-container"> ? ? <div class="layout-content"> ? ? ? <keep-alive> ? ? ? ? <router-view v-if="$route.meta.keepAlive" style="margin-bottom: 50px"/> ? ? ? </keep-alive> ? ? ? <router-view v-if="!$route.meta.keepAlive" style=" margin-bottom: 50px"/> ? ? </div> ? ? <!-- ? ?底部導(dǎo)航組件 ? --> ? ? <div class="layout-footer"> ? ? ? <TabBar :data="tabbars" @change="handleChange"/> ? ? </div> ? </div> </template>
<script>
import TabBar from '@/components/TabBar'
export default {
? name: 'Home',
? computed: {
? ? key() {
? ? ? return this.$route.path
? ? }
? },
? data() {
? ? return {
? ? ? pic: '@src/assets/images/home-black.png',
? ? ? cachedViews: 'Home',
? ? ? tabbars: [
? ? ? ? {
? ? ? ? ? title: '首頁',
? ? ? ? ? to: {
? ? ? ? ? ? name: 'Home'
? ? ? ? ? },
? ? ? ? ? normal: require("../../src/assets/images/home_black.png"),
? ? ? ? ? active: require("../../src/assets/images/home_selected.png")
? ? ? ? },
? ? ? ? {
? ? ? ? ? title: '模塊',
? ? ? ? ? to: {
? ? ? ? ? ? name: 'Model'
? ? ? ? ? },
? ? ? ? ? normal: require("../../src/assets/images/model_black.png"),
? ? ? ? ? active: require("../../src/assets/images/model_selected.png")
? ? ? ? },
? ? ? ? {
? ? ? ? ? title: '關(guān)于我',
? ? ? ? ? to: {
? ? ? ? ? ? name: 'Mine'
? ? ? ? ? },
? ? ? ? ? normal: require("../../src/assets/images/mine_black.png"),
? ? ? ? ? active: require("../../src/assets/images/mine_selected.png")
? ? ? ? }
? ? ? ]
? ? }
? },
? components: {
? ? TabBar
? },
? methods: {
? ? handleChange(v) {
? ? ? console.log('tab value:', v)
? ? }
? }
}
</script>2.TabBar組件代碼
<template>
? <div>
? ? <van-tabbar fixed route v-model="active" @change="handleChange">
? ? ? <van-tabbar-item v-for="(item, index) in data" :to="item.to" :icon="item.icon" :key="index">
? ? ? ? <span :class="defaultActive === index ? active:''">{{ item.title }}</span>
? ? ? ? <template slot="icon" slot-scope="props">
? ? ? ? ? <img :src="props.active ? item.active : item.normal">
? ? ? ? </template>
? ? ? </van-tabbar-item>
? ? </van-tabbar>
? </div>
</template><script>
export default {
? name: 'TabBar',
? props: {
? ? defaultActive: {
? ? ? type: Number,
? ? ? default: 0
? ? },
? ? data: {
? ? ? type: Array,
? ? ? default: () => {
? ? ? ? return []
? ? ? }
? ? }
? },
? data() {
? ? return {
? ? ? active: this.defaultActive
? ? }
? },
? methods: {
? ? handleChange(value) {
? ? ? this.$emit('change', value)
? ? }
? }
}
</script><style scoped>
.active_tab img {
? width: 26px;
? height: 26px;
}
/* 自定義選中的顏色 */
.van-tabbar-item--active {
? color: #d81e06;
}
</style>3.運行效果圖
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue $router和$route的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
跨域問題的出現(xiàn)是因為瀏覽器的同源策略問題，如果沒有同源策略我們的瀏覽器將會十分的不安全，隨時都可能受到攻擊，今天小編通過本文給大家介紹下vue 處理跨域問題，感興趣的朋友一起看看吧2021-09-09
在Vue中延遲執(zhí)行某個函數(shù)的實現(xiàn)方式
在Vue中延遲執(zhí)行某個函數(shù),你可以使用setTimeout()函數(shù)或者Vue提供的生命周期鉤子函數(shù),本文通過一些示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue項目如何實現(xiàn)切換主題色思路，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue2和vue3中provide/inject的基本用法示例
Vue中的provide/inject是一種組件間通信的方式,它允許父組件向子組件傳遞數(shù)據(jù),而不需要通過props或事件來實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue2/vue3中provide/inject的基本用法的相關(guān)資料,需要的朋友可以參考下2023-04-04
下面小編就為大家?guī)硪黄猇ue自定義事件(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家介紹了Vue之事件處理和事件修飾符，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-11-11
vue中formdata傳值給后臺時參數(shù)為空的問題
這篇文章主要介紹了vue中formdata傳值給后臺時參數(shù)為空的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了如何在?vue?中使用?svg?symbols，本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
不過 Vue 本身含有非常豐富的功能，要用 Vue 搭建完整的應(yīng)用，仍然需要了解大量 Vue 設(shè)計概念和操作技巧。這篇文章主要介紹了Vue.js 十五分鐘入門圖文教程,需要的朋友可以參考下2018-09-09