<template>
|
<div
|
class="cubebase-sidebar-comp"
|
:class="{ 'is-hide': menuShrink, 'is-mobile': isMobile }"
|
>
|
<nuxt-link class="cubebase-sidebar-comp__top" to="/">
|
<transition name="nameFade">
|
<div v-if="!menuShrink" class="cubebase-sidebar-comp__top__title">
|
{{ platformName }}
|
</div>
|
</transition>
|
</nuxt-link>
|
<el-scrollbar wrap-class="scrollbar-wrapper">
|
<el-bus-menu
|
:content="menus"
|
:default-active="activeRoute"
|
:collapse="menuShrink"
|
:background-color="variables.menuBg"
|
:text-color="variables.menuText"
|
:unique-opened="false"
|
:active-text-color="variables.menuActiveText"
|
:collapse-transition="false"
|
mode="vertical"
|
:props="{ index: 'fullPath' }"
|
@menuItemSelect="onMenuItemClick"
|
/>
|
</el-scrollbar>
|
</div>
|
</template>
|
|
<script>
|
import { mapState, mapGetters } from 'vuex'
|
import variables from '@/assets/variable.scss'
|
|
export default {
|
name: 'BaseSidebar',
|
data() {
|
return {
|
platformName: this.$config.platformName,
|
}
|
},
|
computed: {
|
variables() {
|
return variables
|
},
|
...mapState({
|
menuShrink: (state) => state.app.menuShrink,
|
isMobile: (state) => state.app.isMobile,
|
activeRoute: (state) => state.app.activeRoute,
|
}),
|
...mapGetters({
|
menus: 'permission/menus',
|
leafMenus: 'permission/leafMenus',
|
}),
|
},
|
watch: {
|
$route() {
|
this.setActiveRoute()
|
},
|
},
|
mounted() {
|
this.setActiveRoute()
|
},
|
methods: {
|
setActiveRoute() {
|
const currentRoute = this.$route.fullPath
|
if (Array.isArray(this.leafMenus)) {
|
const matchRoute = this.leafMenus.find((item) =>
|
currentRoute.includes(item.fullPath)
|
)
|
if (matchRoute) {
|
this.$store.commit('app/SET_ACTIVE_ROUTE', matchRoute.fullPath)
|
}
|
}
|
},
|
onMenuItemClick(item) {
|
if (item.fullPath.includes('http')) {
|
window.open(item.fullPath, '_blank')
|
} else {
|
this.$router.push(item.fullPath)
|
}
|
},
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.nameFade-enter-active {
|
opacity: 0;
|
white-space: nowrap;
|
transition: all 0.28s;
|
}
|
|
.cubebase-sidebar-comp {
|
display: flex;
|
flex-direction: column;
|
transition: width 0.28s;
|
width: $sideBarWidth !important;
|
background-color: $menuBg;
|
height: 100%;
|
position: relative;
|
z-index: 1001;
|
overflow: hidden;
|
&__top {
|
position: relative;
|
width: 100%;
|
padding: 25px 10px;
|
background: #2b2f3a;
|
text-align: center;
|
overflow: hidden;
|
display: block;
|
&__logo {
|
width: 32px;
|
height: 32px;
|
border-radius: 50%;
|
vertical-align: middle;
|
margin-bottom: 15px;
|
}
|
&__title {
|
margin: 0;
|
color: #fff;
|
font-weight: 600;
|
font-size: 14px;
|
overflow: hidden;
|
}
|
}
|
.el-scrollbar {
|
flex: 1;
|
::v-deep .el-menu {
|
border: none;
|
height: 100%;
|
width: 100% !important;
|
.submenu-title-noDropdown,
|
.el-submenu__title {
|
&:hover {
|
background-color: $menuHover !important;
|
}
|
}
|
|
.is-active > .el-submenu__title {
|
color: $subMenuActiveText !important;
|
}
|
|
.nest-menu .el-submenu > .el-submenu__title,
|
.el-submenu .el-menu-item {
|
min-width: $sideBarWidth !important;
|
background-color: $subMenuBg !important;
|
|
&:hover {
|
background-color: $subMenuHover !important;
|
}
|
}
|
}
|
::v-deep {
|
.el-bus-menu {
|
i {
|
color: #fff;
|
font-size: 14px;
|
margin-right: 16px;
|
width: 14px;
|
}
|
::v-deep .el-submenu__icon-arrow {
|
color: #fff;
|
}
|
.el-submenu {
|
@for $i from 1 through 4 {
|
.el-menu-item {
|
padding-left: 64px !important;
|
}
|
.el-submenu.level-#{$i} {
|
::v-deep {
|
.el-submenu__title {
|
@if $i==0 {
|
padding-left: 20px !important;
|
} @else {
|
padding-left: 32px * ($i + 1) !important;
|
}
|
}
|
}
|
.el-menu-item {
|
@if $i==0 {
|
padding-left: 64px !important;
|
} @else {
|
padding-left: 32px * ($i + 1) + 10px !important;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
::v-deep .scrollbar-wrapper {
|
overflow-x: hidden !important;
|
}
|
}
|
&.is-hide {
|
width: 54px !important;
|
::v-deep .el-menu {
|
.el-submenu {
|
overflow: hidden;
|
.el-submenu__icon-arrow {
|
display: none;
|
}
|
}
|
}
|
.cubebase-sidebar-comp__top {
|
&__logo {
|
margin-bottom: 0;
|
}
|
}
|
}
|
&.is-mobile {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
&.is-hide {
|
width: 0 !important;
|
}
|
}
|
}
|
</style>
|
