新建文件夹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>