技术文摘
Vue3 Element-plus 中 el-menu 无限级菜单组件的封装方法
在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 无限级菜单组件封装
- ZOMBIES:软件开发中业务需求的实现(四)
- 在本机将 Nacos 设为自启动服务的方法
- Form 元素乃 React 之未来
- Spring IOC 体系结构设计原理深度剖析
- Fork/Join 框架:处理大规模数据计算任务的得力助手
- Webpack4 中 SourceMap 阶段的性能优化与踩坑经验
- SuperSocket 的分层架构与对象模型
- Canvas 优秀开源项目推荐:十例精选
- 微服务的 20 个常见误解
- 共话产品与技术管理
- 垃圾回收:程序中的自动内存管理
- 安卓对 Js 函数的调用以计算高度
- 彻底搞懂 Java 中的 lambda 匿名函数
- Jeddak-DPSQL 首次开源 具备基于差分隐私的 SQL 代理保护能力
- 可配置化代码高效满足客户需求