vue3封装Element导航菜单

1. 导航外层布局 AsideView.vue

<template>
  <el-menu
    :default-active="defaultActive"
    class="my-menu"
    :collapse="isCollapse"
    :collapse-transition="false"
    @open="handleOpen"
    @close="handleClose"
  >
    <menu-item :menuList="menuList"></menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";

import MenuItem from "./components/MenuItem.vue";
const collapseStore = useCollapseStore();
const isCollapse = computed(() => collapseStore.collapse);
const store = useMenuStore();
const menuList = store.menuList;
const flattenMenuList = store.flattenMenuList();
const defaultActive = ref("");
onMounted(() => {
  const route = useRoute();
  watch(
    () => route.fullPath,
    (newPath, oldPath) => {
      getDefaultActive(newPath);
    },
    {
      immediate: true,
    }
  );
});

const getDefaultActive = (path) => {
  const currentMenu = flattenMenuList.find((item) => item.path === path);
  if (currentMenu) {
    defaultActive.value = currentMenu.id;
  }
  console.log("defaultActive", defaultActive.value);
};

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style lang="scss">
.icon-collapse {
  cursor: pointer;
  width: 64px;
  height: 30px;
  margin: 0 auto;
}
.my-menu {
  background-color: #545c64;
  border-right: none;
  color: #fff;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.el-menu-item,
.el-sub-menu__title {
  background-color: #545c64;
  color: #fff;
}
.el-menu-item:hover,
.el-sub-menu__title:hover {
  background: rgb(62, 64, 74);
}
.el-menu-item.is-active,
.el-sub-menu__title.is-active {
  background: rgb(62, 64, 74);
}
/* 滚动条 */
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 7px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 7px;
  &-thumb {
    /*滚动条里面小方块*/
    border-radius: 7px;
    background-color: #d0d0d0;
    &:hover {
      /*滚动条里面小方块*/
      background-color: #b7b7b7;
    }
  }
  &-track {
    /*滚动条里面轨道*/
    border-radius: 7px;
    background-color: #fff;
  }
}
</style>

2. 单个导航菜单封装 MenuItem.vue

<template>
  <template v-for="item in menuList" :key="item.id">
    <el-sub-menu
      :index="item.id"
      v-if="item.children && item.children.length > 0"
    >
      &l