<template>
|
<div class="side-menu-wrapper">
|
<!-- <logo :collapse="isCollapse" /> -->
|
<div class="side-menu-content">
|
<el-menu
|
:default-active="activeMenu"
|
:collapse="isCollapse"
|
:background-color="menuStyle.bg"
|
:text-color="menuStyle.text"
|
:unique-opened="false"
|
:active-text-color="menuStyle.activeText"
|
:collapse-transition="false"
|
mode="vertical"
|
>
|
<sidebar-item
|
v-for="route in menus"
|
:key="route.path"
|
:item="route"
|
:base-path="route.path"
|
/>
|
</el-menu>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
import Logo from "./Logo";
|
import sidebarItem from "./SidebarItem.vue";
|
import routes from "@/router/routes";
|
export default {
|
components: { Logo, sidebarItem },
|
data() {
|
return {
|
menuStyle: {
|
bg: "#153953",
|
text: "#77EEF7",
|
activeText: "#77EEF7",
|
},
|
menus: routes,
|
};
|
},
|
computed: {
|
...mapGetters(["sidebar", "uid"]),
|
activeMenu() {
|
const route = this.$route;
|
const { meta, path } = route;
|
if (meta.activeMenu) {
|
return meta.activeMenu;
|
}
|
return path;
|
},
|
isCollapse() {
|
return !this.sidebar.opened;
|
},
|
},
|
mounted() {
|
if (this.uid > 1000) {
|
this.menus = this.menus.filter(
|
(v) => !["/system"].some((vv) => vv == v.path)
|
);
|
}
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.side-menu-wrapper {
|
display: flex;
|
flex-direction: column;
|
.side-menu-content {
|
flex: 1;
|
overflow-y: auto;
|
background: #153953;
|
border-right: 1px solid #77EEF7;
|
.el-menu {
|
padding: 0 6px;
|
min-width: 20em;
|
:deep(.el-menu-item) {
|
border-radius: 6px;
|
}
|
}
|
}
|
}
|
#app .el-menu :deep(.el-menu-item.is-active) {
|
background-color: #011f39 !important;
|
}
|
</style>
|
