<template> <div class="aside"> <el-scrollbar v-show="isCollapse && !$route.query.showMenu" wrap-class="scrollbar-wrapper"> <el-menu :default-active="activeMenu" :collapse="false" background-color="inherit" :text-color="variables.menuText" :unique-opened="false" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical" > <template v-for="(item, topMenuIndex) in menus"> <sidebar-item :key="topMenuIndex" :item="item" :index="topMenuIndex + ''" /> </template> </el-menu> </el-scrollbar> </div> </template> <script> import { mapGetters } from 'vuex' // import Logo from './Logo' import SidebarItem from './SidebarItem' import variables from '@/styles/variables.scss' import _cloneDeep from 'lodash.clonedeep' export default { name: 'Sidebar', components: { SidebarItem }, data() { return {} }, computed: { ...mapGetters(['sidebar', 'routes', 'menus']), // routes() { // return this.$router.options.routes // }, activeMenu() { const route = this.$route const { meta, path } = route // if set path, the sidebar will highlight the path you set if (meta.activeMenu) { return meta.activeMenu } return path }, variables() { return variables }, isCollapse() { return this.sidebar.opened } }, watch: { // $route: { // handler: function(val) { // }, // immediate: true // } }, created() { // if (this.menus.length === 0) { // let menus = localStorage.getItem('menu') // menus = JSON.parse(menus) // if (menus) { // this.$store.dispatch('menu/updateMenu', menus) // } // } }, mounted() {}, methods: { sortMenuFun(value) { return _cloneDeep(value).sort((a, b) => { return a.sort - b.sort }) } } } </script> <style lang="scss"> @import "../../../styles/variables"; .aside { width: $asideBarWidth !important; overflow: hidden; height: 100%; background-color: #FFFFFF; .el-scrollbar__view { border: 1px solid #D3DBE1; box-sizing: border-box; overflow: auto; height: calc(100% - 76px)!important; } /deep/ .el-menu-item { display: flex; justify-content: center; align-items: center; padding: 0 !important; } /deep/ .el-menu-item:hover { background-color: rgba(0, 0, 0, 0.12); } /deep/ .el-menu-item:focus { background-color: transparent !important; .icon { background-color: rgba(0, 0, 0, 0.12); } } .icon { width: 30px; height: 30px; padding: 8px; border-radius: 2px; } .user-m-icon { font-size: 18px !important; // margin: 0 !important; } .menu-m-icon { width: 18px; // height: 24px; } } </style>