92 lines
2.1 KiB
Vue
92 lines
2.1 KiB
Vue
<template>
|
|
<div class="page-menu">
|
|
<el-scrollbar wrap-class="page-menu-scrollbar">
|
|
<el-menu
|
|
class="page-menu__menu"
|
|
background-color="#fff"
|
|
text-color="#000"
|
|
active-text-color="#25bf82"
|
|
:collapse-transition="true"
|
|
:unique-opened="true"
|
|
:default-active="active"
|
|
:default-openeds="openeds"
|
|
>
|
|
<SubItem v-for="item in menus" :key="item.path" :item="item" />
|
|
</el-menu>
|
|
</el-scrollbar>
|
|
</div>
|
|
</template>
|
|
<script setup name="page-menu">
|
|
import { computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { findParentRoute } from '@/utils/router';
|
|
import { isEmpty } from '@/utils';
|
|
import SubItem from '@/layouts/component/Menu/SubItem';
|
|
|
|
const props = defineProps({
|
|
menus: { type: Array, default: () => [] },
|
|
});
|
|
|
|
const route = useRoute();
|
|
|
|
const openeds = computed(() => {
|
|
const item = findParentRoute(props.menus, route.path);
|
|
return !isEmpty(item) ? [item.path] : [];
|
|
});
|
|
|
|
const active = computed(() => {
|
|
const item = findParentRoute(props.menus, route.path);
|
|
return !isEmpty(item) ? item.path : '';
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.page-menu {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #ffffff;
|
|
transition: width 0.28s;
|
|
&-scrollbar {
|
|
height: calc(100vh - 60px) !important;
|
|
}
|
|
:deep(.el-scrollbar__wrap) {
|
|
height: calc(100vh - 60px) !important;
|
|
}
|
|
&__menu {
|
|
border-right: 0;
|
|
:deep(.el-menu-item),
|
|
:deep(.el-sub-menu__title) {
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
|
|
&:hover {
|
|
background-color: #fff;
|
|
color: $color-primary;
|
|
}
|
|
}
|
|
:deep(.el-menu-item) {
|
|
@include flex-row();
|
|
align-items: center;
|
|
padding: 0 16px !important;
|
|
}
|
|
:deep(.el-sub-menu .el-menu-item) {
|
|
font-size: 16px;
|
|
padding-left: 50px !important;
|
|
&:hover {
|
|
.icon-dot {
|
|
background-color: $color-primary;
|
|
}
|
|
}
|
|
}
|
|
:deep(.el-sub-menu .el-icon) {
|
|
font-size: 20px;
|
|
}
|
|
:deep(.el-menu-item.is-active) {
|
|
background-color: #fff;
|
|
}
|
|
&:not(.el-menu--collapse) {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|