<!-- 导航菜单 -->
|
<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, index) in routerList">
|
|
<template v-if="item.children && item.children.length >= 1">
|
<el-submenu :key="item.name" :index="item.path">
|
<template slot="title">
|
<i class="icon"><img :src="menuIcons[index] ? menuIcons[index] : menuIcons[0]"></i>
|
<span>{{ item.meta.title }}</span>
|
</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" class="titles_two">
|
<template slot="title">
|
<span>{{ three.meta.title }}</span>
|
</template>
|
<el-menu-item class="three-menu-item" v-for=" items in three.children " :index="items.path"
|
:key="items.name">
|
{{ items.meta.title }}
|
</el-menu-item>
|
</el-submenu>
|
</template>
|
<template v-else>
|
<el-menu-item class="two-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>
|
<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: [], // 导航栏数据
|
menuIcons: []
|
};
|
},
|
created() {
|
this.menuIcons = [
|
require('@/assets/icon/icon0.png'),
|
require('@/assets/icon/icon1.png'),
|
require('@/assets/icon/icon2.png'),
|
require('@/assets/icon/icon3.png'),
|
require('@/assets/icon/icon4.png'),
|
require('@/assets/icon/icon5.png'),
|
require('@/assets/icon/icon6.png'),
|
require('@/assets/icon/icon7.png'),
|
require('@/assets/icon/icon8.png'),
|
]
|
},
|
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);
|
|
.icon {
|
display: inline-block;
|
vertical-align: middle;
|
margin-right: 5px;
|
width: 24px;
|
text-align: center;
|
|
img {
|
width: 65%;
|
}
|
}
|
|
&::-webkit-scrollbar {
|
width: 4px;
|
}
|
}
|
|
.titles_two {
|
text-indent: 30px;
|
|
/deep/ .el-menu {
|
padding: 14px 0;
|
background: rgba(33, 83, 139, .75) !important;
|
}
|
}
|
|
/deep/ .el-menu {
|
border-right: 0;
|
}
|
|
/deep/ .three-menu-item {
|
padding-left: 50px !important;
|
height: 45px;
|
line-height: 45px;
|
}
|
|
/deep/ .two-menu-item {
|
height: 45px;
|
text-indent: 20px;
|
line-height: 45px;
|
}
|
|
/deep/ .el-menu-item.is-active {
|
position: relative;
|
color: #EAEAEA;
|
border-radius: 3px;
|
background: linear-gradient(90deg, rgba(57, 181, 254, .5) 5%, rgba(57, 181, 254, .1) 100%) !important;
|
|
&::before {
|
content: '';
|
position: absolute;
|
top: 50%;
|
left: 0;
|
transform: translateY(-50%);
|
width: 4px;
|
height: 100%;
|
background: #3DC8FF;
|
border-radius: 3px 0 0 3px;
|
}
|
}
|
|
.three_item {
|
background: #0B5274 !important;
|
}
|
|
/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>
|
