vant ui TabBar封装
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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- 主页标签切换 --> <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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- 主页标签切换 --> <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>
外面传的数据
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 } };