storevisit-ui-mobile/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' ? honeselect : home" />
        </template>
      </van-tabbar-item>
      <!--        <van-tabbar-item name="ai" >-->
      <!--          <span>AI参谋</span>-->
      <!--          <template #icon>-->
      <!--            <van-icon :name="tabBarActive == 'ai' ? aiselect : ai"/>-->
      <!--          </template>-->
      <!--        </van-tabbar-item>-->
      <van-tabbar-item name="deviceWithin">
        <span>计划内</span>
        <template #icon>
          <van-icon :name="tabBarActive == 'deviceWithin' ? jihuaselect : jihua" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="outsidelist">
        <span>计划外</span>
        <template #icon>
          <van-icon :name="tabBarActive == 'outsidelist' ? outselect : out" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="MyList">
        <span>我的</span>
        <template #icon>
          <van-icon :name="tabBarActive == 'MyList' ? storeselect : storePng" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import home from '@/assets/Icon/home.png';
import honeselect from '@/assets/Icon/hone-select.png';
import jihua from '@/assets/Icon/jihua.png';
import jihuaselect from '@/assets/Icon/jihuaselect.png';
import out from '@/assets/Icon/out.png';
import outselect from '@/assets/Icon/outselect.png';
import storePng from '@/assets/Icon/store.png';
import storeselect from '@/assets/Icon/storeselect.png';
import ai from '@/assets/Icon/ai.png';
import aiselect from '@/assets/Icon/aiselect.png';
import store from '@/store';
export default {
  name: 'tabBar',
  props: {
    tabBarActive: {
      type: String,
      default: 'home',
    },
  },
  data() {
    return {
      ai: ai,
      aiselect: aiselect,
      storePng: storePng,
      storeselect: storeselect,
      honeselect: honeselect,
      home: home,
      jihuaselect: jihuaselect,
      jihua: jihua,
      out: out,
      outselect: outselect,
      tabBarAct: this.tabBarActive,
      show: false,
    };
  },
  computed: {
    ActiveMessage: {
      get() {
        return (this.tabBarAct = this.tabBarActive);
      },
      set(newValue) {
        return newValue;
      },
    },
  },
  methods: {
    tabBarChange(name) {
      // 计划外
      if (name == 'outsidelist') {
        // 进入计划内刷新列表
        // store.dispatch('setDeviceOutsidePage', true);
      }
      this.$router.push({ name: name + '' });
    },
  },
};
</script>
<style lang="scss">
.tabBar {
  z-index: 9999;
}
</style>