vant中Tabbar自定义图标

有时候根据需求需要自定义图标，使用图片的形式。

 

<template>
  <div class="home">
    <router-view></router-view>
    <TabBar :tabData="tabbarList" />
  </div>
</template>

<script>
import TabBar from '@/components/TabBar';
export default {
  name: 'HomeView',
  components: {
    TabBar
  },
  data() {
    return {
      active: 0,
      tabbarList: [
        {
          title: '首页',
          path: { name: 'home'},
          normal: require("../../src/assets/images/home_black.png"),
          active: require("../../src/assets/images/home_selected.png")
        },
        {
          title: '标准',
          path: { name: 'Standardization'},
          normal: require("../../src/assets/images/standard_black.png"),
          active: require("../../src/assets/images/standard_selected.png")
        },
        {
          title: '商户',
          path: { name: 'inventory'},
          normal: require("../../src/assets/images/standard_black.png"),
          active: require("../../src/assets/images/standard_selected.png")
        },
        {
          title: '我的',
          path: { name: 'setup'},
          normal: require("../../src/assets/images/standard_black.png"),
          active: require("../../src/assets/images/standard_selected.png")
        }
      ]
    }
  }
}
</script>

　　

tabBar组件

<template>
  <div class="tabbar">
    <van-tabbar v-model="active" @click="handleChange" fixed router >
      <van-tabbar-item 
        v-for="(item, index) in tabData" 
        :icon="item.icon"
        :to="item.path" 
        :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
    },
    tabData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      active: this.defaultActive
    }
  },
  methods: {
    handleChange(val) {
      this.$emit('change', val);
    }
  }
}
</script>

<style scoped>
.active_tab img {
  width: 3rem;
  height: 3rem;
}
.van-tabbar-item--active {
  color: #0E5CD8;
}
</style>