<!-- 导航菜单 -->
|
<template>
|
<div class="menu_index">
|
<el-menu
|
unique-opened
|
:default-active="$route.path"
|
class="el-menu-vertical-demo"
|
background-color="transparent"
|
text-color="#EAEAEA"
|
@select="changeRouter">
|
<template v-for="item in routerList">
|
<template v-if="item.children && item.children.length > 1">
|
<el-submenu :key="item.name" :index="item.path">
|
<template slot="title">
|
<span>{{item.meta.title}}</span>
|
</template>
|
<!-- <template v-for="items in item.children">
|
<el-menu-item :index="items.path" :key="items.name">{{items.meta.title}}</el-menu-item>
|
</template> -->
|
|
|
<template v-for="three in item.children">
|
<template v-if="three.children && three.children.length > 1">
|
<el-submenu :key="three.name" :index="three.path">
|
<template slot="title">
|
<span>{{three.meta.title}}</span>
|
</template>
|
<template v-for="items in three.children">
|
<el-menu-item :index="items.path" :key="items.name">{{items.meta.title}}</el-menu-item>
|
</template>
|
</el-submenu>
|
</template>
|
<template v-else-if="three.children && three.children.length === 1">
|
<el-submenu :key="three.name" :index="three.path">
|
<template slot="title">
|
<span>{{three.meta.title}}</span>
|
</template>
|
<el-menu-item :index="three.children[0].path" :key="three.children[0].name">{{three.children[0].meta.title}}</el-menu-item>
|
</el-submenu>
|
<!-- <el-menu-item :index="three.children[0].path" :key="three.children[0].name">
|
<span slot="title">{{three.children[0].meta.title}}</span>
|
</el-menu-item> -->
|
</template>
|
<template v-else>
|
<el-menu-item :index="three.path" :key="three.name">
|
<span slot="title">{{three.meta.title}}</span>
|
</el-menu-item>
|
</template>
|
</template>
|
|
|
</el-submenu>
|
</template>
|
|
|
|
|
|
<template v-else-if="item.children && item.children.length === 1">
|
<el-menu-item :index="item.children[0].path" :key="item.children[0].name">
|
<span slot="title">{{item.children[0].meta.title}}</span>
|
</el-menu-item>
|
</template>
|
<template v-else>
|
<el-menu-item :index="item.path" :key="item.name">
|
<span slot="title">{{item.meta.title}}</span>
|
</el-menu-item>
|
</template>
|
</template>
|
</el-menu>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'LayoutAside',
|
data() {
|
return {
|
routerList: [], // 导航栏数据
|
};
|
},
|
mounted() {
|
this.routerList = this.$router.options.routes
|
},
|
methods: {
|
// 切换路由
|
changeRouter(path) {
|
this.$router.push(path).catch(err => {
|
console.log(err,"--");
|
})
|
}
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.menu_index {
|
height: 100%;
|
overflow-y: auto;
|
border-top: 1px solid rgba(57,181,254,0.16);
|
|
|
&::-webkit-scrollbar {
|
width: 4px;
|
}
|
|
&::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
box-shadow: inset 0 0 5px transparent;
|
background: rgba(57, 181, 254, .6);
|
}
|
|
&::-webkit-scrollbar-track {
|
box-shadow: inset 0 0 5px transparent;
|
border-radius: 10px;
|
background: rgba(57, 181, 254, .5) 5%,;
|
}
|
}
|
|
/deep/ .el-menu {
|
border-right: 0;
|
}
|
|
/deep/ .el-submenu .el-menu-item {
|
height: 40px;
|
line-height: 40px;
|
}
|
|
/deep/ .el-menu-item.is-active {
|
padding-left: 45px!important;
|
position: relative;
|
margin-left: 10px;
|
color: #3DC8FF;
|
border-radius: 3px;
|
background: linear-gradient(
|
90deg,
|
rgba(57, 181, 254, .5) 5%,
|
transparent 95%) !important;
|
|
&::before {
|
content: '';
|
position: absolute;
|
top: 50%;
|
left: 0;
|
transform: translateY(-50%);
|
width: 4px;
|
height: 100%;
|
background: #3DC8FF;
|
border-radius: 3px 0 0 3px;
|
}
|
}
|
|
/deep/ .el-submenu .el-submenu__title:hover {
|
color: #3DC8FF;
|
background: rgba(57,181,254,0.7) !important;
|
}
|
|
/deep/ .el-menu-item:hover {
|
color: #3DC8FF;
|
background: rgba(57, 181, 254, .5) !important;
|
}
|
</style>
|
