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.
54 lines
1.4 KiB
54 lines
1.4 KiB
<template> |
|
<div :class="{'has-logo':showLogo}"> |
|
<logo v-if="showLogo" :collapse="isCollapse" /> |
|
<el-scrollbar wrap-class="scrollbar-wrapper"> |
|
<el-menu |
|
:default-active="activeMenu" |
|
:collapse="isCollapse" |
|
:background-color="variables.menuBg" |
|
:text-color="variables.menuText" |
|
:unique-opened="true" |
|
:active-text-color="variables.menuActiveText" |
|
:collapse-transition="false" |
|
mode="vertical" |
|
> |
|
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> |
|
</el-menu> |
|
</el-scrollbar> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { mapGetters } from 'vuex' |
|
import Logo from './Logo' |
|
import SidebarItem from './SidebarItem' |
|
import variables from '@/assets/styles/variables.scss' |
|
|
|
export default { |
|
components: { SidebarItem, Logo }, |
|
computed: { |
|
...mapGetters([ |
|
'permission_routes', |
|
'sidebar' |
|
]), |
|
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 |
|
}, |
|
showLogo() { |
|
return this.$store.state.settings.sidebarLogo |
|
}, |
|
variables() { |
|
return variables |
|
}, |
|
isCollapse() { |
|
return !this.sidebar.opened |
|
} |
|
} |
|
} |
|
</script>
|
|
|