vue3封装tabbar组件

tabbarItem接收选项参数

• 1.path(路由页面path)
  type:String
• 2.selectedColor(选中文字颜色)
  type:String

1.tabbarItem.vue

<template>
  <div id="tabbar-item" @click="itemClick">
    <!-- 未选中图标 -->
    <div v-if="!isSelected">
      <slot name="item-icon">
        <img src="./../assets/imgs/home.svg" alt="" />
      </slot>
    </div>
    <!-- 选中图标 -->
    <div v-else>
      <slot name="item-icon-selected"></slot>
    </div>
    <!-- 文本内容 -->
    <div :style="selectedText">
      <slot name="item-text">文本</slot>
    </div>
  </div>
</template>

<script>
import {
      useRouter, useRoute } from "vue-router";
import {
      computed, onActivated } from "vue";
export default {
     
  name: "tabbarItem",
  // 选项接收的参数
  props: {
     
    path: String,
    selectedColor: {
     
      type: String,
      // 设置默认样式
      default: "orange",
    },
  },

  setup(props, context) {
     
    // 1.点击item-icon进行路由切换
    const router = useRouter();
    const itemClick = () => {
     
      router.push(props.path);
    };

    // 2.选项是否选中
    const route