<!--
|
* @Author: 黄攀
|
* @Date: 2022-07-07 15:15:36
|
* @Description:
|
-->
|
<template>
|
<div class="sidebar">
|
<el-menu :default-active="defaultActive" class="el-menu-vertical-demo" :router="true"
|
unique-opened>
|
<navMenu :navMenus="subMenuList"></navMenu>
|
</el-menu>
|
</div>
|
</template>
|
<script>
|
import navMenu from '@/components/navMenu/index.vue'
|
// import iconArr from '@/utils/constant/iconArr'
|
export default {
|
props: {
|
subMenuList: {
|
type: Array,
|
default() {
|
return []
|
}
|
}
|
},
|
components: {
|
navMenu
|
},
|
computed: {
|
defaultActive() {
|
return this.$route.meta.menuPath || this.$route.path
|
}
|
},
|
// created() {
|
// this.setMenuIcon();
|
// },
|
methods: {
|
// setMenuIcon() {
|
// if (this.subMenuList && this.subMenuList.length > 0) {
|
// this.subMenuList.forEach((v1) => {
|
// let _obj = iconArr.find((v2) => v2.path === v1.url);
|
// if (_obj) {
|
// Object.assign(v1, _obj)
|
// }
|
// })
|
// }
|
// }
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
$color: #333333;
|
.sidebar {
|
/deep/ .el-menu {
|
background: transparent;
|
border-right: none;
|
.el-menu-item,
|
.hasChildrenMenu.el-submenu .el-submenu__title {
|
color: rgba(255, 255, 255, 0.65);
|
height: 60px;
|
line-height: 60px;
|
}
|
.el-menu-item.noChildrenMenu,
|
.hasChildrenMenu.el-submenu .el-submenu__title {
|
border-left: 6px solid transparent;
|
}
|
.el-menu-item:hover,
|
.hasChildrenMenu.el-submenu .el-submenu__title:hover {
|
background-color: $color;
|
}
|
.el-menu-item:focus {
|
background: transparent;
|
}
|
.hasChildrenMenu.el-submenu.is-active .el-menu-item.is-active {
|
background-color: #c2a16c !important;
|
border-left: 6px solid #c2a16c !important;
|
}
|
.hasChildrenMenu.is-active > .el-submenu__title,
|
.noChildrenMenu.is-active {
|
color: white;
|
background: #333333;
|
border-left: 6px solid #d0261e;
|
}
|
.hasChildrenMenu.is-active > .el-submenu__title i {
|
color: white;
|
}
|
.iconfont{
|
font-size:20px;
|
}
|
}
|
}
|
</style>
|
