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

<!-- 主页标签切换 -->
<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
      }
    };