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.运行效果图