121 lines
2.4 KiB
Vue
121 lines
2.4 KiB
Vue
<template>
|
|
<el-aside
|
|
class="sidebar-container"
|
|
width="190px"
|
|
:collapsed="isCollapsed"
|
|
:class="isCollapsed && 'collapsed'"
|
|
>
|
|
<el-scrollbar class="scrollbar-wrapper">
|
|
<BaseMenu
|
|
v-bind="menuProps"
|
|
class="sidebar-menu"
|
|
@select="selectItem"
|
|
></BaseMenu>
|
|
</el-scrollbar>
|
|
<OperateBtn class="operate" @click="$emit('toggleCollapsed')"> </OperateBtn>
|
|
</el-aside>
|
|
</template>
|
|
|
|
<script>
|
|
import { computed } from "vue";
|
|
import BaseMenu from "./BaseMenu.vue";
|
|
import OperateBtn from "./OperateBtn.vue";
|
|
import useMenuColorConfig from "./useMenuColorConfig";
|
|
import useBreakPoint from "./useBreakPoint";
|
|
|
|
export default {
|
|
components: { BaseMenu, OperateBtn },
|
|
props: {
|
|
isCollapsed: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
menuData: {
|
|
type: Array
|
|
},
|
|
isLimitLevel: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
basePath: {
|
|
type: String,
|
|
default: "/"
|
|
},
|
|
matchPath: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
selectItem: {
|
|
type: Function
|
|
}
|
|
},
|
|
setup(props, { emit }) {
|
|
const { menuColorConfig } = useMenuColorConfig();
|
|
const menuProps = computed(() => {
|
|
const { menuData, isLimitLevel, basePath, matchPath, isCollapsed } =
|
|
props;
|
|
return {
|
|
menuData,
|
|
isLimitLevel,
|
|
basePath,
|
|
matchPath,
|
|
collapse: isCollapsed,
|
|
...unref(menuColorConfig),
|
|
mainMenu: true,
|
|
uniqueOpened: true
|
|
};
|
|
});
|
|
useBreakPoint('xl', emit)
|
|
return {
|
|
menuProps
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.sidebar-container {
|
|
position: relative;
|
|
background: var(--custom-base-color-background);
|
|
color: var(--custom-base-color-text);
|
|
z-index: 3;
|
|
transition: width 0.2s;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
&.collapsed {
|
|
width: 48px !important;
|
|
overflow: initial;
|
|
.operate {
|
|
position: absolute;
|
|
left: 25px;
|
|
transform: rotate(90deg);
|
|
transition: left 0.1s;
|
|
z-index: -1;
|
|
&:hover {
|
|
left: 28px;
|
|
}
|
|
}
|
|
}
|
|
.scrollbar-wrapper {
|
|
height: 100%;
|
|
:deep(.el-scrollbar__view) {
|
|
height: 100%;
|
|
}
|
|
:deep(.el-scrollbar__wrap) {
|
|
overflow-x: hidden;
|
|
}
|
|
}
|
|
.operate {
|
|
position: absolute;
|
|
left: 155px;
|
|
top: 50%;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
transform: rotate(-90deg);
|
|
transition: left 0.1s;
|
|
&:hover {
|
|
left: 150px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|