You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
3.0 KiB
130 lines
3.0 KiB
1 year ago
|
<template>
|
||
|
|
<!-- 系统管理左侧导航菜单 -->
|
||
|
|
<el-menu
|
||
|
|
ref="menu"
|
||
|
|
:default-active="activeMenu"
|
||
|
|
class="el-menu-vertical-demo"
|
||
|
|
:router="true"
|
||
|
|
>
|
||
|
|
<!-- background-color="#f5f2e9"
|
||
|
|
text-color="#5aa4ae" -->
|
||
|
|
<!-- 一级导航 -->
|
||
|
|
<el-menu-item
|
||
|
|
:route="item.path"
|
||
|
|
v-for="item in menuList"
|
||
|
|
:key="item.name"
|
||
|
|
:index="item.name"
|
||
|
|
>
|
||
|
|
<i>
|
||
|
|
<img :src="item.icon" alt="" />
|
||
|
|
</i>
|
||
|
|
<span slot="title">{{ item.title }}</span>
|
||
|
|
</el-menu-item>
|
||
|
|
</el-menu>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "LeftNav",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
isCollapse: false,
|
||
|
|
activeMenu: "",
|
||
|
|
menuList: [],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
created() {
|
||
|
|
this.activeMenu = this.$route.meta.name;
|
||
|
|
console.log(this.$route);
|
||
|
|
console.log(this.$router);
|
||
|
|
this.dealMenu(this.$router.getRoutes());
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
dealMenu(menu) {
|
||
|
|
this.menuList = [];
|
||
|
|
menu = menu || [];
|
||
|
|
let curName = this.$route.name;
|
||
|
|
for (let i = 0; i < menu.length; i++) {
|
||
|
|
if (menu[i]["path"].indexOf(curName) > -1) {
|
||
|
|
if (menu[i]["meta"] && menu[i]["meta"]["aside"]) {
|
||
|
|
this.menuList.push({
|
||
|
|
title: menu[i]["meta"]["title"],
|
||
|
|
name: menu[i]["meta"]["name"],
|
||
|
|
path: menu[i]["path"],
|
||
|
|
icon: menu[i]["meta"]["icon"],
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
console.log(this.menuList);
|
||
|
|
},
|
||
|
|
// 点击跳转路由
|
||
|
|
clickMenu(val) {
|
||
|
|
this.$router.push({
|
||
|
|
path: val.path,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
setCurrentRoute() {
|
||
|
|
this.active = this.$route.path; //监听到当前路由状态并激活当前菜单
|
||
|
|
},
|
||
|
|
handleOpen(key, keyPath) {
|
||
|
|
console.log(key, keyPath);
|
||
|
|
},
|
||
|
|
handleClose(key, keyPath) {
|
||
|
|
console.log(key, keyPath);
|
||
|
|
},
|
||
|
|
select() {
|
||
|
|
sessionStorage.setItem("navkeep", this.$refs.menu.activeIndex);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
$route(to, from) {
|
||
|
|
console.log("aside", to);
|
||
|
|
this.activeMenu = to.meta.name;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
||
|
|
width: 100%; /* 保持和大的aside同宽 */
|
||
|
|
min-height: 98%; /* 固定侧边导航栏高度 */
|
||
|
|
background: url("~@/assets/companyFile/menuback.png") no-repeat;
|
||
|
|
padding: 20px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
.el-menu-vertical-demo.el-menu {
|
||
|
|
.el-menu-item {
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 20px;
|
||
|
|
// margin-left: 17px;y
|
||
|
|
color: #fff;
|
||
|
|
font-size: 18px;
|
||
|
|
background: url("~@/assets/companyFile/921.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
i {
|
||
|
|
margin-right: 10px;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
img {
|
||
|
|
margin-bottom: 4px;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.is-active {
|
||
|
|
filter: brightness(150%);
|
||
|
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.el-menu-item:focus,
|
||
|
|
.el-menu-item:hover {
|
||
|
|
/* 导航选项点击触碰效果 */
|
||
|
|
filter: brightness(150%);
|
||
|
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|