技术文摘
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 无限级菜单组件封装
- AJAX POST 数据含特殊符号(转义字符)致数据丢失的解决之道
- 前端 Ajax 请求与后端 Java 实现的 ZIP 压缩包下载功能示例
- Notepad++中运用正则表达式处理数据的流程
- 前后端 Ajax 与 JSON 数据交换模式
- Notepad++中正则表达式的匹配方法
- 密码正则表达式写法全解析
- 深度剖析浏览器缓存机制
- 避免在 HTML 中过度使用 div
- 正则表达式中关于“空”字符匹配方法的特别注意事项
- Ajax 封装的详细解析
- 异步请求 Ajax 原理与原生 Ajax、$.ajax 基本使用全面解析
- AJAX 异步通信技术在搜索联想与自动补全中的应用示例
- HTML 各类标签的学习之道
- 详解 stylelint 这一 CSS 代码检查工具的使用方法
- AJAX 乱码、异步同步及 jQuery 库封装实现步骤详析