Vant的Tabbar标签栏引入自定义图标方式
时间：2022-11-17 10:15:33|栏目：vue|点击： 次
Tabbar标签栏引入自定义图标
**使用*van-tabbar*组件**
*v-model*绑定的是对应的Tabbar下标*active-color*是未选中的文字颜色*inactive-color*是已选中的文字颜色**route**这个要特别注意，我就是在这踩了坑，我没有加这个参数，但是能正常跳转路由，但是图标选中会出现问题，每次都需要双击。一直以为是插槽的问题，后面才发现官方api的这个参数
*van-tabbar-item*每一个Tab标签 #icons 自定义图标的插槽 props.active 插槽的值，点击后为true，初始为false
<van-tabbar v-model="active" active-color="#42A46F" inactive-color="#999999" @change="onChange" route>
<van-tabbar-item to="/myorder">
<span>我的预约</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图标和颜色
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> <!-- 底部导航组件 --> <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: '关于我',
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.运行效果图
