TabBar.vue基本上是放在App.vue里面，都存在
<template>
<div id="app">
<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>
index.js
import HomeTabBar from './HomeTabBar'
export default {
//Vue.use()方法就会自动执行install
install(Vue) {
Vue.component(HomeTabBar.name, HomeTabBar) //组建的名字和组件
}
}外面传的props tarBarConfig
tarBarConfig: {
tabBarItemList: [
{
label: "about",
routerPath: "/about",
icon: {
active: require("assets/img/homeTabBar/aboutActive.png"),
inactive: require("assets/img/homeTabBar/aboutInactive.png")
}
},
{
label: "goods",
routerPath: "/goods",
icon: {
active: require("assets/img/homeTabBar/goodsAcitve.png"),
inactive: require("assets/img/homeTabBar/goodsInacitve.png")
}
},
{
label: "news",
routerPath: "/news",
icon: {
active: require("assets/img/homeTabBar/newsActive.png"),
inactive: require("assets/img/homeTabBar/newsInactive.png")
}
}
],
active: "news", //默认激活的值
activeColor: "#1989fa", //激活色
inactiveColor: "#7d7e80" // 未选中标签的颜色 000
}第二种方式：直接使用vant里面的图标，就不需要定义插槽了。很简单的封装
homeTabBar.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"
:icon="item.icon"
:to="item.routerPath"
>
{{item.label}}
</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: "", //默认激活的值 在item label中选择
activeColor: "#1989fa", //激活色
inactiveColor: "#7d7e80" // 未选中标签的颜色 000
}
};
},
methods: {
initDefaultTarBarConfig() {
this.defaultTarBarConfig = {
...this.defaultTarBarConfig,
...this.tarBarConfig
};
}
},
created() {
this.initDefaultTarBarConfig();
}
};
</script>
<style lang="less" scoped>
</style>
外面传的数据
tarBarConfig: {
tabBarItemList: [
{
label: "about",
routerPath: "/about",
icon: "home-o"
},
{
label: "goods",
routerPath: "/goods",
icon: "home-o"
},
{
label: "news",
routerPath: "/news",
icon: "home-o"
}
],
active: "news", //默认激活的值
activeColor: "#1989fa", //激活色
inactiveColor: "#7d7e80" // 未选中标签的颜色 000
}
};