技术文摘
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 无限级菜单组件封装
- ITer奋进不止——SOA企业架构师工具包
- 专家支招 快速架设SVN代码管理服务器方法
- Visual Studio 2010扩展的创建与发布
- ITer奋进不止——软件架构师必备工具包
- ITer奋进不止 数据库架构师必备工具包
- SVN1.6服务端与客户端安装配置专家指导
- ITer天天向上:DB2 9性能调优工具包
- ITer奋进不止——Web2.0开发者工具包
- ITer天天向上之DBA数据管理工具包
- ITer奋进不止——Web站点质量自动化工具包
- ITer奋进不止——数据架构师实用工具包
- ITer奋进不止——Web应用安全工具包
- SVN新手入门基本操作
- ITer天天向上 敏捷开发宝典
- ITer奋进之路——需求与测试管理工具包