tabBar.vue 2.2 KB
<template>
  <div class="tabbar">
    <van-tabbar
      v-model="tabbarTempValue"
      @change="onChange"
      active-color="#599158"
    >
      <van-tabbar-item>
        课堂
        <template #icon="props">
          <img
            class="icon-img"
            :src="props.active ? icon.courseactive : icon.course"
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item
        >社区
        <template #icon="props">
          <img
            class="icon-img"
            :src="props.active ? icon.shequactive : icon.shequ"
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item
        >活动中心
        <template #icon="props">
          <img
            class="icon-img"
            :src="props.active ? icon.societyactive : icon.society"
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item
        >个人中心
        <template #icon="props">
          <img
            class="icon-img"
            :src="props.active ? icon.personactive : icon.person"
          />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from "vue";
import { Tabbar, TabbarItem } from "vant";
import { Icon } from "vant";
import { Notify } from "vant";

Vue.use(Notify);
Vue.use(Tabbar).use(TabbarItem);
Vue.use(Icon);
export default {
  props: {
    active: Number
  },
  data() {
    return {
      tabbarTempValue: this.active,
      icon: {
        course: require("../../assets/ketang.png"),
        courseactive: require("../../assets/ketangactive.png"),
        shequ: require("../../assets/shequ.png"),
        shequactive: require("../../assets/shequactive.png"),
        society: require("../../assets/society.png"),
        societyactive: require("../../assets/societyactive.png"),
        person: require("../../assets/person.png"),
        personactive: require("../../assets/personactive.png")
      }
    };
  },
  methods: {
    onChange(index) {
      const routerArray = ["/", "/society", "/activity", "/usercenter"];
      this.$router.push(routerArray[index]);
    }
  }
};
</script>

<style>
.van-tabbar-item__icon img {
  width: 0.54rem;
  height: 0.44rem;
}
</style>