vue3 + ts 二次封装 el-menu

实现效果：

1. types / menu.ts

export interface MenuItem {
    index: string,
    label: string,
    icon?: string,
    disabled?: boolean,
    children?: MenuItem[],
}

2. components / CustomMenu / index.vue

<template>

  <el-menu :default-active="defaultActive">
    <custom-menu-item :menu-list="props.menuList"/>
  </el-menu>

</template>

<script setup lang="ts">

import CustomMenuItem from "@/components/CustomMenu/components/CustomMenuItem.vue";
import type {MenuItem} from "@/types/menu";

const props = defineProps<{
  menuList: MenuItem[],
  defaultActive?: string
}>()

</script>

<style scoped lang="scss">

</style>

3. components / CustomMenu / components / CustomMenuItem.vue

<template>

  <template v-for="menu in props.menuList" :key="menu.index">
    <el-sub-menu v-if="menu.children" :index="menu.index" :disabled="menu.disabled">
      <template #title>
        <el-icon v-if="menu.icon">
          <component :is="menu.icon"/>
        </el-icon>
        <span>{{ menu.label }}</span>
      </template>
      <custom-menu-item :menu-list="menu.children"/>
    </el-sub-menu>
    <el-menu-item v-else :index="menu.index" :disabled="menu.disabled">
      <el-icon v-if="menu.icon">
        <component :is="menu.icon"/>
      </el-icon>
      <span>{{ menu.label }}</span>
    </el-menu-item>
  </template>

</template>

<script setup lang="ts">

import type {MenuItem} from "@/types/menu";

const props = defineProps<{
  menuList: MenuItem[]
}>()

</script>

<style scoped lang="scss">

</style>

4. 使用 test.vue

<template>

  <div class="custom-menu-container">
    <custom-menu :menu-list="menuList" :default-active="defaultActive"/>
  </div>

</template>

<script setup lang="ts">

import CustomMenu from '@/components/CustomMenu/index.vue'

const defaultActive = '1-1'

import type {MenuItem} from "@/types/menu";

const menuList: MenuItem[] = [
    {
        index: '1',
        label: '菜单1',
        icon: 'House',
        children: [
            {
                index: '1-1',
                label: '菜单1-1',
                // icon: 'Connection'
            },
            {
                index: '1-2',
                label: '菜单1-2',
                // icon: 'ChatDotRound'
            }
        ]
    },
    {
        index: '2',
        label: '菜单2',
        icon: 'Notification',
        children: [
            {
                index: '2-1',
                label: '菜单2-1',
                // icon: 'Setting'
            }
        ]
    },
    {
        index: '3',
        label: '菜单3',
        icon: 'Odometer'
    }
]

</script>

<style scoped lang="scss">

.custom-menu-container {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 200px;
  height: fit-content;
}

</style>