动态左侧菜单栏组件揭秘：Vue3+Ts+Vite+el-menu玩转菜单栏

基于 el-menu 组件的左侧菜单栏：二次封装指南

简介

在前端项目中，左侧菜单栏是一个不可或缺的元素。el-menu 组件为我们提供了强大的功能来构建菜单栏，但为了满足项目特定的需求，我们常常需要对它进行二次封装。本文将一步步指导你如何封装一个左侧菜单栏组件，包括根据路由列表动态渲染菜单、支持多级菜单和处理菜单项事件。

el-menu 组件介绍

el-menu 是 element-plus 中一个广泛使用的组件，可帮助开发人员轻松创建菜单栏。它提供了一系列功能：

• 支持多种菜单模式：水平、垂直和手风琴
• 菜单项类型多样：文字、图标、带子菜单
• 菜单项状态丰富：禁用、隐藏、激活
• 响应丰富的事件：点击、悬停、展开/收缩

封装左侧菜单栏组件

步骤 1：创建组件

首先，创建一个组件并引入 el-menu 组件。

import { defineComponent } from 'vue';
import { ElMenu } from 'element-plus';

export default defineComponent({
  components: { ElMenu },
  // ...
});

步骤 2：渲染菜单

下一步是使用 v-for 指令遍历路由列表并动态生成菜单项。

<template>
  <el-menu>
    <el-menu-item v-for="item in routes" :key="item.path">
      <template #title>{{ item.meta.title }}</template>
      <router-link :to="item.path"></router-link>
    </el-menu-item>
  </el-menu>
</template>

步骤 3：支持多级菜单

如果菜单中包含子菜单，你需要实现多级菜单的递归渲染。使用 v-if 指令判断菜单项是否包含子菜单，如果是，则递归渲染子菜单。

<template>
  <el-menu>
    <el-menu-item v-for="item in routes" :key="item.path">
      <template #title>{{ item.meta.title }}</template>
      <router-link :to="item.path"></router-link>
      <template v-if="item.children">
        <el-menu-item v-for="child in item.children" :key="child.path">
          <template #title>{{ child.meta.title }}</template>
          <router-link :to="child.path"></router-link>
        </el-menu-item>
      </template>
    </el-menu-item>
  </el-menu>
</template>

步骤 4：处理菜单项事件

最后，你需要处理菜单项的事件，如点击、悬停、展开/收缩。使用 @click、@mouseenter、@mouseleave 和 @expand-change 指令来监听这些事件。

<template>
  <el-menu>
    <el-menu-item v-for="item in routes" :key="item.path" @click="handleClick">
      <template #title>{{ item.meta.title }}</template>
      <router-link :to="item.path"></router-link>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default defineComponent({
  methods: {
    handleClick(item) {
      // ...
    }
  }
});
</script>

常见问题解答

1. 如何禁用菜单项？

<el-menu-item :disabled="true">...</el-menu-item>

2. 如何隐藏菜单项？

<el-menu-item v-if="!isHidden">...</el-menu-item>

3. 如何为菜单项添加图标？

<el-menu-item>
  <template #title><i class="el-icon-menu"></i> {{ item.meta.title }}</template>
</el-menu-item>

4. 如何设置菜单为手风琴模式？

<el-menu :accordion="true">...</el-menu>

5. 如何获取选中的菜单项？

const selectedMenu = this.$refs.menu.activeIndex;

总结

通过按照这些步骤，你可以轻松地封装一个左侧菜单栏组件，该组件可以根据路由列表动态渲染菜单、支持多级菜单和处理菜单项事件。

如果你有任何其他问题，请随时留言。