storevisit-ui-mobile-agent/src/components/tabBar.vue

<template>
  <div class="tabBar">
    <van-tabbar
      v-model="ActiveMessage"
      @change="tabBarChange"
      active-color="#0057ba"
      inactive-color="#222">
      <van-tabbar-item name="home">
        <span>首页</span>
        <template #icon>
          <van-icon
            :name="
              tabBarActive == 'home'
                ? require('@/assets/icon/hone-select.png')
                : require('@/assets/icon/home.png')
            " />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="agentList">
        <span>经销商</span>
        <template #icon>
          <van-icon :name="tabBarActive == 'agentList' ? activedChain : chains" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="info">
        <span>我的</span>
        <template #icon>
          <van-icon :name="tabBarActive == 'info' ? activedInfo : info" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import chains from '@/assets/icon/chain.svg';
import activedChain from '@/assets/icon/activedChain.svg';
import info from '@/assets/icon/info.svg';
import activedInfo from '@/assets/icon/activedInfo.svg';
export default {
  name: 'tabBar',
  props: {
    tabBarActive: {
      type: String,
      default: 'home',
    },
  },
  data() {
    return {
      chains: chains,
      activedChain: activedChain,
      info: info,
      activedInfo: activedInfo,
      tabBarAct: this.tabBarActive,
      show: false,
    };
  },
  computed: {
    ActiveMessage: {
      get() {
        return (this.tabBarAct = this.tabBarActive);
      },
      set(newValue) {
        return newValue;
      },
    },
  },
  methods: {
    tabBarChange(index) {
      this.$router.push({ name: index + '' });
    },
  },
};
</script>
<style lang="scss">
.tabBar {
  z-index: 9999;
}
</style>