提升用户体验：利用el-menu导航菜单二次封装实现动态多级菜单

2023-12-10 11:24:35

概述

在现代网络应用中，导航菜单扮演着至关重要的角色，它不仅能够帮助用户快速找到所需信息，还能提升整体的用户体验。如今，越来越多的项目倾向于使用el-menu导航菜单，因为它不仅功能强大，而且易于使用。然而，在某些情况下，我们需要对el-menu导航菜单进行二次封装，以实现更灵活、更动态的多级菜单。

为什么需要二次封装？

那么，为什么要对el-menu导航菜单进行二次封装呢？主要有以下几个原因：

动态性: 二次封装可以使菜单能够根据用户的权限或其他动态数据进行动态生成。这对于需要根据不同用户角色展示不同菜单的系统来说非常有用。
可复用性: 二次封装可以提高代码的可复用性。通过将菜单封装成一个组件，可以轻松地在其他地方复用，而无需重新编写代码。
灵活性: 二次封装可以使菜单更加灵活。您可以根据需要添加或删除功能，而无需修改原有的el-menu导航菜单代码。

如何二次封装el-menu导航菜单？

接下来，我们将详细介绍如何对el-menu导航菜单进行二次封装，以实现动态多级菜单。

1. 准备工作

首先，您需要创建一个新的JavaScript文件，例如menu.js，并将其放在项目的静态资源文件夹中。

2. 引入必要的依赖

接下来，您需要在menu.js文件中引入必要的依赖。

import Vue from 'vue';
import { ElMenu, ElMenuItem } from 'element-ui';

Vue.use(ElMenu);
Vue.use(ElMenuItem);

3. 创建递归组件

现在，我们需要创建一个递归组件，该组件将用于生成多级菜单。

export default {
  name: 'ElMenuWrapper',
  components: {
    ElMenu,
    ElMenuItem,
  },
  props: {
    menuData: {
      type: Array,
      required: true,
    },
  },
  methods: {
    // 递归生成菜单项
    renderMenuItem(item) {
      if (item.children && item.children.length > 0) {
        return (
          <ElSubMenu key={item.id} index={item.id}>
            <template slot="title">{item.label}</template>
            {item.children.map(child => this.renderMenuItem(child))}
          </ElSubMenu>
        );
      } else {
        return (
          <ElMenuItem key={item.id} index={item.id}>{item.label}</ElMenuItem>
        );
      }
    },
  },
  render() {
    return (
      <ElMenu
        router={true}
        default-active={this.menuData[0].id}
        class="el-menu-wrapper"
      >
        {this.menuData.map(item => this.renderMenuItem(item))}
      </ElMenu>
    );
  },
};

4. 在Vue组件中使用

现在，您可以在Vue组件中使用这个组件来生成多级菜单。

<template>
  <div>
    <el-menu-wrapper :menu-data="menuData" />
  </div>
</template>

<script>
import ElMenuWrapper from './components/ElMenuWrapper.vue';

export default {
  components: {
    ElMenuWrapper,
  },
  data() {
    return {
      menuData: [
        {
          id: 1,
          label: 'Home',
          path: '/',
        },
        {
          id: 2,
          label: 'About',
          path: '/about',
        },
        {
          id: 3,
          label: 'Services',
          children: [
            {
              id: 31,
              label: 'Service 1',
              path: '/services/1',
            },
            {
              id: 32,
              label: 'Service 2',
              path: '/services/2',
            },
          ],
        },
        {
          id: 4,
          label: 'Contact',
          path: '/contact',
        },
      ],
    };
  },
};
</script>