Vue3 Element-plus 中 el-menu 无限级菜单组件的封装方法

2025-01-10 20:24:45   小编

在Vue3与Element-plus的项目开发中,无限级菜单的实现是一个常见需求,而封装el-menu无限级菜单组件能有效提升代码的复用性与可维护性。下面将详细介绍其封装方法。

创建一个新的Vue组件,例如命名为 InfiniteMenu.vue。在组件的模板部分,使用 el-menu 作为基础容器。el-menu 提供了丰富的样式与交互功能,我们可以根据项目需求进行定制。

<template>
  <el-menu :default-active="activeIndex" class="infinite-menu" @select="handleSelect">
    <template v-for="(menuItem, index) in menuList" :key="index">
      <template v-if="menuItem.children && menuItem.children.length > 0">
        <el-sub-menu :index="menuItem.id + ''">
          <template #title>
            <span>{{ menuItem.name }}</span>
          </template>
          <InfiniteMenu :menuList="menuItem.children"></InfiniteMenu>
        </el-sub-menu>
      </template>
      <template v-else>
        <el-menu-item :index="menuItem.id + ''">
          <span>{{ menuItem.name }}</span>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>

在上述代码中,通过 v-for 遍历菜单数据 menuList。如果菜单项有子菜单,就使用 el-sub-menu 组件,并递归调用自身 InfiniteMenu 组件来展示子菜单;如果没有子菜单,则直接使用 el-menu-item 展示。

接着,在组件的脚本部分定义数据与方法。

import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'InfiniteMenu',
  props: {
    menuList: {
      type: Array,
      default: () => []
    }
  },
  setup() {
    const activeIndex = ref('');

    const handleSelect = (index) => {
      activeIndex.value = index;
      // 可以在这里添加点击菜单后的业务逻辑,例如路由跳转等
    };

    return {
      activeIndex,
      handleSelect
    };
  }
});

在这段代码中,通过 props 接收菜单数据 menuList,并在 setup 函数中定义了当前激活菜单项的索引 activeIndex 以及菜单点击事件处理函数 handleSelect

最后,在需要使用无限级菜单的组件中引入并使用 InfiniteMenu.vue 组件。

<template>
  <div>
    <InfiniteMenu :menuList="menuData"></InfiniteMenu>
  </div>
</template>

<script setup>
import InfiniteMenu from './InfiniteMenu.vue';
import { ref } from 'vue';

const menuData = ref([
  { id: 1, name: '菜单1', children: [] },
  { id: 2, name: '菜单2', children: [
    { id: 21, name: '子菜单2.1', children: [] },
    { id: 22, name: '子菜单2.2', children: [] }
  ] }
]);
</script>

通过以上步骤,我们成功在Vue3 Element-plus 中封装了el-menu无限级菜单组件,能够轻松满足复杂菜单展示的需求,提升开发效率。

TAGS: Vue3 Element-Plus el-menu 无限级菜单组件封装

欢迎使用万千站长工具!

Welcome to www.zzTool.com