TabBar.vue基本上是放在App.vue里面，都存在
<template>
<div >
<home-tab-bar :tar-bar-config="tarBarConfig"></home-tab-bar>
<router-view></router-view>
</div>
</template>
我自己把TabBar.vue定义成一个全局组件。
并且用的是自定义图标。如果用到了自定义图标，就需要定义插槽了。
TabBar.vue
<!-- 主页标签切换 -->
<template>
<div class="home-tab-bar">
<van-tabbar
v-model="defaultTarBarConfig.active"
route
:active-color="defaultTarBarConfig.activeColor"
:inactive-color="defaultTarBarConfig.inactiveColor"
>
<van-tabbar-item
v-for="(item, index) in defaultTarBarConfig.tabBarItemList"
:key="index"
replace
:name="item.label"
:to="item.routerPath"
>
<span>{{item.label}}</span>
<template #icon="props">
<img :src="props.active ? item.icon.active : item.icon.inactive" />
</template>
</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
export default {
props: {
tarBarConfig: {
type: Object,
required: true
}
},
name: "HomeTabBar",
data() {
return {
defaultTarBarConfig: {
tabBarItemList: [
// {
// label: "about", //文字标签
// routerPath: "/about", //路由
// icon: "home-o" //图标
// },
],
active: "", //默认激活的值
activeColor: "#1989fa", //激活色
inactiveColor: "#7d7e80" // 未选中标签的颜色 000
}
};
},
methods: {
initDefaultTarBarConfig() {
this.defaultTarBarConfig = {
...this.defaultTarBarConfig,
...this.tarBarConfig
};
}
},
created() {
this.initDefaultTarBarConfig();
}
};
</script>
<style lang="less" scoped>
</style>