菜单组件使用ivew库的Menu组件,用哪个库都行,逻辑是一样的
1. 先写一层循环,第二层循环的时候定义一个用来递归的组件,这个组件注册为全局组件,用来自己调用自己
<!-- 菜单 -->
<Menu theme="dark" width="auto" :class="menuitemClasses" @on-select="handleSelectMenu">
<div v-for="item in menuList" :key="item.id">
<div>
<MenuItem :name="item.path" v-if="(!item.subMenu || item.subMenu.length <= 0)">
{
{ item.title }}
</MenuItem>
<template v-else>
<deep-menu v-if="item.type==0" :routeData="item" :shrink="shrink"></deep-menu>
</template>
</div>
</div>
</Menu>
<!-- -->
<template>
<div>
<Submenu :name="routeData.path">
<template slot="title">
<Icon type="ios-analytics" />
{
{ shrink ? "" : routeData.title }}
</template>
<div v-for="item in routeData.subMenu" :key="item.id">
<div>
<!-- (!item.subMenu || item.subMenu.length <= 0) -->
<MenuItem :name="item.path" v-if="item.type==1">
{
{ shrink ? "" : item.title }}
</MenuItem>
<!-- v-if="item.type==0 && item.subMenu.length>0" -->
<template v-else>
<deep-menu :shrink="shrink" :routeData="item">
</deep-menu>
</template>
</div>
</div>
</Submenu>
</div>
</template>
<script>
export default {
name:"DeepMenu",
props: {
routeData: {
type: Object,
},
shrink: {
type: Boolean,
required: true,
},
},
data() {
return {};
},
methods: {},
created() {},
mounted() {},
};
</script>
<style lang='less' scoped>
</style>