Vue3+Ts+Vite项目(第九篇)——基于el-menu封装左侧菜单栏组件，element-plus el-menu二次封装

<template>
  <el-menu
    :default-active="defaultActive"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
  >
    <template v-for="item in menuList" :key="item.index">
      <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.index">
        <template #title>
          <i :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </template>
        <menu-item
          v-for="subItem in item.children"
          :key="subItem.index"
          :index="subItem.index"
          :title="subItem.title"
          :icon="subItem.icon"
        />
      </el-sub-menu>
      <el-menu-item v-else :index="item.index">
        <i :class="item.icon"></i>
        <template #title>{{ item.title }}</template>
      </el-menu-item>
    </template>
  </el-menu>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import MenuItem from './MenuItem.vue';
 
export default defineComponent({
  name: 'SideMenu',
  components: {
    MenuItem
  },
  props: {
    menuList: {
      type: Array,
      default: () => []
    },
    defaultActive: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit }) {
    const handleOpen = (index: string, indexPath: string) => {
      emit('open', index, indexPath);
    };
 
    const handleClose = (index: string, indexPath: string) => {
      emit('close', index, indexPath);
    };
 
    return {
      handleOpen,
      handleClose
    };
  }
});
</script>
 
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}
</style>

这个代码实例展示了如何在Vue 3和TypeScript中使用Vite创建一个基于Element Plus的el-menu（左侧菜单栏）组件。组件接受menuList属性，它是一个包含菜单项和子菜单项的数组，每个项目都有一个索引、标题和可选的图标。如果项目有子菜单，它将使用el-sub-menu组件来渲染，否则使用el-menu-item。代码中还包含了一个处理打开和关闭菜单项的函数，它们通过自定义事件的方式与父组件通信。