cocoroboWork-App2/src/components/tools/bottomNav.vue

<template>
  <div class="bottom">
    <!-- <van-row class="test-row">
      <van-col span="8">
        <div
          class="item"
          @click="clickItem('/')"
          :class="{ active: $route.path === '/' }"
        >
          <i class="iconA" :class="{ iconC: $route.path === '/' }"></i>
          <p>首页</p>
        </div>
      </van-col>
      <van-col span="8">
        <div
          class="item"
          @click="clickItem('/learning')"
          :class="{ active: $route.path === '/learning' }"
        >
        <i class="iconA" :class="{ iconC: $route.path === '/learning' }"></i>
          <p>学习中心</p>
        </div>
      </van-col>
      <van-col span="8">
        <div
          class="item"
          @click="clickItem('/my')"
          :class="{ active: $route.path === '/my' }"
        >
          <i class="iconA" :class="{ iconC: $route.path === '/my' }"></i>
          <p>我的</p>
        </div>
      </van-col>
    </van-row> -->
    <!-- @change="onChange" -->
    <van-tabbar v-model="active" active-color="#46bb65" inactive-color="#000">
      <van-tabbar-item to="/">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? home.active : home.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/learning">
        <span>学习中心</span>
        <template #icon="props">
          <img :src="props.active ? learning.active : learning.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/find">
        <span>发现</span>
        <template #icon="props">
          <img :src="props.active ? find.active : find.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/my">
        <span>我的</span>
        <template #icon="props">
          <div class="noticeBox">
            <span v-if="nCount != 0"></span>
            <img :src="props.active ? my.active : my.inactive" />
          </div>
        </template>
      </van-tabbar-item>
      <!-- <van-tabbar-item badge="4">
        <span>自定义</span>
        <template #icon="props">
          <img :src="props.active ? ccc.active : ccc.inactive" />
        </template>
      </van-tabbar-item> -->
    </van-tabbar>
  </div>
</template>

<script>
import home from "../../assets/tabbarIcon/shouye1.png";
import home_active from "../../assets/tabbarIcon/shouye.png";
import learning from "../../assets/tabbarIcon/xuexizhongxin1.png";
import learning_active from "../../assets/tabbarIcon/xuexizhongxin.png";
import find from "../../assets/tabbarIcon/faxian1.png";
import find_active from "../../assets/tabbarIcon/faxian.png";
import my from "../../assets/tabbarIcon/wode1.png";
import my_active from "../../assets/tabbarIcon/wode.png";
export default {
  props: {
    luyou: Number,
    nCount: Number,
  },
  data() {
    return {
      active: 0,
      navTabs: ["/", "/learning", "/find", "/my"], // 底部导航
      home: {
        active: home_active,
        inactive: home,
      },
      learning: {
        active: learning_active,
        inactive: learning,
      },
      find: {
        active: find_active,
        inactive: find,
      },
      my: {
        active: my_active,
        inactive: my,
      },
    };
  },
  created() {
    this.routerP();
  },
  methods: {
    routerP() {
      const { navTabs } = this.$data;
      let router_path = this.$route.path;
      console.log(router_path);
      for (var i = 0; i < navTabs.length; i++) {
        if (router_path == navTabs[i]) {
          this.active = i;
          break;
        }
      }
    },
    clickItem: function (path) {
      this.$router.push(path);
    },
    // onChange(index) {
    //   Notify({ type: 'primary', message: index });
    // },
  },
  watch: {
    luyou: {
      handler(n, o) {
        this.routerP();
      },
      deep: true, // 深度监听父组件传过来对象变化
    },
  },
};
</script>

<style scoped>
.bottom {
}

.active {
  color: #108b70;
}
.noticeBox {
  position: relative;
  /* margin-right: 10px; */
}
.noticeBox span {
  position: absolute;
  background: red;
  width: 5px;
  height: 5px;
  border-radius: 30px;
  top: -3px;
  right: -3px;
}
</style>