Vue模仿饿了么封装侧边导航菜单

新建文件夹components，再建一个children文件夹,包含以下.vue文件
children文件夹下的hl-Menu.vue，hl-Menu-item.vue，hl-subMenu.vue，reSub.vue

//hl-Menu.vue
<template>
		<ul>
			<slot></slot>
		</ul>
</template>

<script>
	export default{
		name:'hlMenu',
		
	}
</script>

<style lang="scss" scoped>
	ul{
		line-height: 55px;
    font-size: 16px;
    height: auto;
		margin-top: 25px;
		cursor: pointer;
	}
</style>
//hl-Menu-item.vue
<template>
		<router-link tag="li" :active-class="`${activeName}`" :to="`${path}`">
			<i :class="`${url}`"></i>
			<slot></slot>
		</router-link>
</template>

<script>
	export default{
		name:'hlMenuItem',
		props:{
			url:{
				type:String,
				default:'',
			},
			activeName:{
				type:String,
				default:'',
			},
			path:{
				type:String,
				default:'',
			}
		}
	}
</script>

<style lang="scss" scoped>
	li{
		height: 55px;
		padding-left: 30px;
		color: #ddd;
	}
	li.active{
		border-left: 5px solid #5f87e0;
    color: #fff;
    background: rgba(0,0,0.5);
	}
</style>
//hl-subMenu.vue
<template>
	<div class="hl-submenu">
		<router-link tag="span" :active-class="`${activeName}`" :to="`${path}`">
			<span @click="open">
				<i :class="`${url}`"></i>
				<slot name="title"></slot>
				<i :class="`${icon}`" ></i>
			</span>
		</router-link>
		<ul v-if="isShow">
			<slot></slot>
		</ul>
	</div>
</template>
<script>
	export default{
		name:'hlSubMenu',
		props:{
			url:{
				type:String,
				default:'',
			},
			activeName:{
				type:String,
				default:'',
			},
			path:{
				type:String,
				default:'',
			}
		},
		data(){
			return {
				isShow:false,
				icon:'el-icon-arrow-down',
			}
		},
		methods:{
			open(){
				if(!this.isShow){
					this.isShow=true;
					this.icon='el-icon-arrow-up';
				}else{
					this.isShow=false;
					this.icon='el-icon-arrow-down';
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.hl-submenu{
		overflow:hidden;
		i{
			font-size: 18px;
		}
		span{
			color: #ddd;
			height: 100%;
			width: 100%;
			display: inline-block;
			padding-left:15px;
		}
		.active{
			border-left: 5px solid #5f87e0;
			color: #fff;
			background: rgba(0,0,0.5);
			padding-left: 15px;
			width: 100%;
		}
		ul{
			list-style: none;
			margin-left: -10px;
			padding-left: 30px;
		}
	}
</style>
//reSub.vue  递归组件
<template>
		<hlSubMenu :url="data.icon" :path="data.path" :activeName="data.activeName">
			<template slot="title">
				{{data.title}}
			</template>
			<template v-for="(item,index) in data.children">
				<ReSub :data="item" v-if="item.children" :key="`sub_${index}`"></ReSub>
				<hlMenuItem  v-else :key="`item_${index}`" :path="item.path" :activeName="item.activeName">{{item.title}}</hlMenuItem>
			</template>
		</hlSubMenu>
</template>

<script>
	import hlSubMenu from './hl-submenu';
	import hlMenuItem from './hl-menu-item';
	export default{
		name:'ReSub',
		components:{hlSubMenu,hlMenuItem},
		props:{
			data:{
				type:Object,
				default:()=>({}),
			}
		}
	}
</script>

文件components的下的navBar.vue

//navBar.vue
<template>
	<!-- 侧边导航组件封装
	 传入侧边导航的数据 ：Array
	 [{
		 title：名称，
		 path：跳转路径
		 icon：名称的icon
		 activeName：当前点击的样式
		 children：二级菜单
	 }] by hhl
	 -->
	<div class="navbar">
		<hlMenu>
			<template v-for="(item,index) in navBarData">
				<ReSub :data="item" v-if="item.children" :key="`sub_${index}`"></ReSub>
				<hlMenuItem :key="`item_${index}`" :url="item.icon" :path="item.path" :activeName="item.activeName" v-else>{{item.title}}</hlMenuItem>
			</template>
		</hlMenu>
	</div>
</template>

<script>
	import hlMenu from './children/hl-menu';
	import hlMenuItem from './children/hl-menu-item';
	import ReSub from './children/reSub';
	export default{
		name:'Navbar',
		components:{hlMenu,hlMenuItem,ReSub},
		data(){
			return {
				navBarData:[
					{
						title:'名单上传',
						icon:'el-icon-upload',
						path:'/uploadText',
						activeName:'active',
					},
					{
						title:'风险信息查询',
						icon:'el-icon-upload',
						path:'/infoQuery',
						activeName:'active',
					},
					{
						title:'查询列表',
						icon:'el-icon-upload',
						path:'/queryList',
						activeName:'active',
					},
					{
						title:'查询统计',
						icon:'el-icon-upload',
						path:'/queryTotal',
						activeName:'active',
						children:[
							{
								title:'发起查询统计',
								path:'/queryTotal/sponsorTotal',				
// 								children:[
// 									{
// 										title:'xxx1',
// 										path:'',
// 									},
// 									{
// 										title:'xxx2',
// 										path:'',
// 									}
// 								],
							},
							{
								title:'被查询统计',
								path:'/queryTotal/toQueryTotal',
							},
						]
					},
					{
						title:'联盟机构查询',
						icon:'el-icon-upload',
						path:'/agencyQuery',
						activeName:'active',
					},
				]
			}
		}
	}
</script>