lsq-book/packages/mobile/src/components/Tabbar/index.vue

<template>
  <div class="tabbar" :class="{ hide: !visible }">
    <div
      v-for="(item, index) in LIST"
      :key="item.label"
      class="tabbar-item"
      :class="{ active: index === activeIndex }"
      @click="
        $router.push({
          name: Array.isArray(item.routeName)
            ? item.routeName[0]
            : item.routeName,
        })
      "
    >
      <img :src="index === activeIndex ? item.activeIcon : item.icon" />
      <p>{{ item.label }}</p>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
import HomeIcon from "./images/icon_home_normal@2x-min.png";
import HomeActiveIcon from "./images/icon_home_active@2x-min.png";
import BookIcon from "./images/icon_book_normal@2x-min.png";
import BookActiveIcon from "./images/icon_book_active@2x-min.png";
import UserIcon from "./images/icon_user_normal@2x-min.png";
import UserActiveIcon from "./images/icon_user_active@2x-min.png";

defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

const LIST = [
  {
    label: "首页",
    icon: HomeIcon,
    activeIcon: HomeActiveIcon,
    routeName: ["home", "home2"],
  },
  {
    label: "书库",
    icon: BookIcon,
    activeIcon: BookActiveIcon,
    routeName: "stack",
  },
  {
    label: "我的",
    icon: UserIcon,
    activeIcon: UserActiveIcon,
    routeName: "mine",
  },
];

const route = useRoute();
const activeIndex = computed(() => {
  return LIST.findIndex((item) =>
    Array.isArray(item.routeName)
      ? item.routeName.includes(route.name)
      : item.routeName === route.name
  );
});
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>