前端开发中，经常遇到需要与后端配置，前端动态渲染菜单的应用场景，而究其本质，就是菜单组件的应用，只是在不确定菜单级数的情况下，我们需要对组件做一个递归处理，让它能够适应大多数应用场景。
如上图所示，以Element-Plus组件库为例，对于一个递归型菜单，我们该如何进行封装呢？先假设后端接口返回的简单菜单信息如下，
[
{
index: "1",
path: "/index",
routeParams: {},
meta: {
title: "首页",
icon: "House",
}
},
{
index: "2",
path: "/funcs",
routeParams: {},
meta: {
title: "功能中心",
icon: "Menu",
}
},
{
index: "3",
path: "/cases",
routeParams: {},
meta: {
title: "项目案例",
icon: "Grid",
mode:"vertical",
},
children: [
{
index: "3-1",
path: "",
routeParams: {},
meta: {
title: "item one",
icon: "Orange",
},
children:[
{
index: "3-1-1",
path: "",
routeParams: {},
meta: {
title: "item one-one",
icon: "Orange",
},
}
]
},
{
index: "3-2",
path: "",
routeParams: {},
meta: {
title: "item two",
icon: "Orange",
}
},
{
index: "3-3",
path: "",
routeParams: {},
meta: {
title: "item three",
icon: "Orange",
}
}
]
}
]实际开发中，还可能包括组件路径、菜单项显隐等相关字段信息，此处暂不考虑，我们当前的核心需求是：如何去完成这样的一个菜单组件的封装。
对于上图所示的效果，我在此处所做的组件封装示例代码如下，
<!-- 多级菜单组件抽取 -->
<template>
<el-menu :default-active="activeIndex" :class="customMenuClass" background-color="transparent" text-color="#fff"
active-text-color="#ffef40" :mode="mode" @select="handleSelect" :ellipsis="false">
<template v-for="(item) in items">
<template v-if="item.children">
<el-sub-menu :index="item.index" popper-class="el-sub-menu-popper-class">
<template #title>
<router-link :to="item.path">
<el-icon>
<component :is="item.meta.icon" :size="24"></component>
</el-icon>
<span>{{ item.meta.title }}</span>
</router-link>
</template>
<menu-list :items="item.children" :mode="item.meta.mode"></menu-list>
</el-sub-menu>
</template>
<template v-else>
<el-menu-item :index="item.index" :key="item.path">
<router-link :to="item.path">
<el-icon>
<component :is="item.meta.icon" :size="24"></component>
</el-icon>
<span>{{ item.meta.title }}</span>
</router-link>
</el-menu-item>
</template>
</template>
</el-menu>
</template>
<script>
export default {
name: "menu-list",
props: {
customMenuClass: {
type: String,
required: false,
default: "el-menu-class",
},
mode: {
type: String,
default: "horizontal",
},
items: {
type: Array,
required: true,
},
activeIndex: {
type: String,
required: false,
default: "",
}
},
data() {
return {}
},
methods: {
handleSelect(key, keyPath, menuItem) {
this.$emit("select",{key, keyPath, menuItem})
}
}
}
</script>
<style lang="scss" scoped>
.el-menu-class {
.el-menu-item:not(.is-disabled):hover {
background-color: rgba(127, 255, 212, .3);
}
}
</style>
<style lang="scss">
.el-sub-menu-popper-class {
background-color: $base-background-color !important;
}
</style>使用示例如下，
//menuList变量对应的就是文章开头处给出的示例数据
<MenuList :items="menuList" active-index="1" mode="horizontal"/>最终，我们就能完成这样的一个递归型菜单组件了，但是对于菜单的样式，可以根据实际需要进行定制。
