vue3和React的Menu组件封装

<template>
  <template v-for="(item, index) in menuList" :key="index">
    <el-menu-item index="2" v-if="!item.children">
      <el-icon><icon-menu /></el-icon>
      <span>{{ item.meta.title }}</span>
    </el-menu-item>
    <el-sub-menu index="1" v-if="item.children">
      <template #title>
        <el-icon><location /></el-icon>
        <span>{{ item.meta.title }}</span>
      </template>
      <Menu :menuList="item.children" />
    </el-sub-menu>
  </template>
</template>

<script lang="ts" setup>
const props = defineProps(["menuList"]);
console.log(props);
</script>
<script lang="ts">
export default {
  name: "Menu",
};
</script>

<style scoped></style>

vue3的Menu组件封装

<template>
  <el-row class="tac">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
    >
      <Menu :menuList="menuList"/>
    </el-menu>
  </el-row>
</template>

<script lang="ts" setup>
import { Document, Menu as IconMenu, Location, Setting } from "@element-plus/icons-vue";
import { useUserStore } from "@/store/modules/user";
import Menu from "@/components/Menu/index.vue";
const { menuInfo } = useUserStore();
let menuList: any = menuInfo.filter((item) => item.path === "/layout")[0].children;
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style lang="less" scoped>
.tac {
  width: 100%;
  height: 100%;
}
</style>

vue3的Menu组件使用

import React from "react";
import { Menu } from "antd";

const MenuInfo = ({ menuList }) => {
  const renderMenu = (menuList) => {
    return menuList.map((item, index) => {
      if (!item.children) {
        return <Menu.Item>{item.name}</Menu.Item>;
      }
      if (item.children) {
        return (
          <Menu.SubMenu title={item.name}>
            {renderMenu(item.children)}
          </Menu.SubMenu>
        );
      }
    });
  };
  return (
    <Menu mode="inline" style={{ width: 200 }}>
      {renderMenu(menuList)}
    </Menu>
  );
};
export default MenuInfo;

React的Menu组件封装