<template>
|
<div class="sidebar">
|
<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
|
text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router
|
>
|
<template v-for="item in items">
|
<template v-if="item.children">
|
<el-submenu :index="item.indexUrl" :key="item.indexUrl"
|
>
|
<template slot="title">
|
<i :class="item.icon"></i><span slot="title">{{ item.name }}</span>
|
</template>
|
<div v-for="subItem in item.children" :key="subItem.indexUrl">
|
<!--<el-submenu v-if="subItem.children" :index="subItem.indexUrl" :key="subItem.indexUrl">-->
|
<!--<template slot="title">-->
|
<!--<i :class="subItem.icon"></i><span slot="title">{{ subItem.name }}</span>-->
|
<!--</template>-->
|
<!--<el-menu-item v-for="(threeItem,i) in subItem.children" :key="i" :index="threeItem.indexUrl">-->
|
<!--<template slot="title">-->
|
<!--<i :class="threeItem.icon"></i><span slot="title">{{ threeItem.name }}</span>-->
|
<!--</template>-->
|
<!--</el-menu-item>-->
|
<!--</el-submenu>-->
|
<el-menu-item :index="subItem.indexUrl">
|
<template slot="title">
|
<i :class="subItem.icon"></i><span slot="title">{{ subItem.name }}</span>
|
</template>
|
</el-menu-item>
|
</div>
|
</el-submenu>
|
</template>
|
<template v-else>
|
<el-menu-item :index="item.indexUrl" :key="item.indexUrl">
|
<template slot="title">
|
<i :class="item.icon"></i><span slot="title">{{ item.name }}</span>
|
</template>
|
</el-menu-item>
|
</template>
|
</template>
|
</el-menu>
|
</div>
|
</template>
|
|
<script>
|
import bus from '../common/bus';
|
import {mapState} from 'vuex';
|
export default {
|
data() {
|
return {
|
collapse: false,
|
|
}
|
},
|
computed:{
|
...mapState({
|
items:'resultAsyncRoutes'
|
}),
|
onRoutes(){
|
return this.$route.path.replace('/','');
|
}
|
},
|
created(){
|
// 通过 Event Bus 进行组件间通信，来折叠侧边栏
|
bus.$on('collapse', msg => {
|
this.collapse = msg;
|
})
|
},
|
mounted(){
|
// type 2 : all
|
// type 0 : 泊车 id:2
|
// type 1 : 执法 id:3
|
// var url = this.$systemconfig.basePath + '/menuList';
|
// this.$byutil.postData(this,url,{},res=>{
|
// this.items = res.obj.menuList;
|
// })
|
},
|
|
}
|
</script>
|
|
<style scoped>
|
.sidebar{
|
display: block;
|
position: absolute;
|
left: 0;
|
top: 70px;
|
bottom:0;
|
overflow-y: scroll;
|
}
|
.sidebar::-webkit-scrollbar{
|
width: 0;
|
}
|
.sidebar-el-menu:not(.el-menu--collapse){
|
width: 250px;
|
}
|
.sidebar > ul {
|
height:100%;
|
}
|
</style>
|
