100 lines
3.2 KiB
Vue
100 lines
3.2 KiB
Vue
<template>
|
|
<el-scrollbar ref="layoutMenuScrollbarRef" class="children-vertical-menus-scrollbar">
|
|
<el-menu
|
|
class="layouts-menu-vertical-children"
|
|
:collapse-transition="false"
|
|
:unique-opened="config.layout.menuUniqueOpened"
|
|
:default-active="state.defaultActive"
|
|
:collapse="config.layout.menuCollapse"
|
|
ref="layoutMenuRef"
|
|
>
|
|
<MenuTree v-if="state.routeChildren.length > 0" :menus="state.routeChildren" />
|
|
</el-menu>
|
|
</el-scrollbar>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, reactive, useTemplateRef } from 'vue'
|
|
import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
|
|
import { onBeforeRouteUpdate, useRoute } from 'vue-router'
|
|
import MenuTree from '/@/layouts/backend/components/menus/menuTree.vue'
|
|
import { useConfig } from '/@/stores/config'
|
|
import { useNavTabs } from '/@/stores/navTabs'
|
|
import { layoutMenuRef } from '/@/stores/refs'
|
|
import { getMenuKey } from '/@/utils/router'
|
|
|
|
const config = useConfig()
|
|
const navTabs = useNavTabs()
|
|
const route = useRoute()
|
|
|
|
const layoutMenuScrollbarRef = useTemplateRef('layoutMenuScrollbarRef')
|
|
|
|
const state: {
|
|
defaultActive: string
|
|
routeChildren: RouteRecordRaw[]
|
|
} = reactive({
|
|
defaultActive: '',
|
|
routeChildren: [],
|
|
})
|
|
|
|
const verticalMenusScrollbarHeight = computed(() => {
|
|
const menuTopBarHeight = config.layout.menuShowTopBar ? 50 : 0
|
|
return 'calc(100% - ' + menuTopBarHeight + 'px)'
|
|
})
|
|
|
|
/**
|
|
* 激活当前路由的菜单
|
|
*/
|
|
const currentRouteActive = (currentRoute: RouteLocationNormalizedLoaded) => {
|
|
// 以路由 fullPath 匹配的菜单优先，且 fullPath 无匹配时，回退到 path 的匹配菜单
|
|
const tabView = navTabs.getTabsViewDataByRoute(currentRoute)
|
|
if (tabView) {
|
|
state.defaultActive = getMenuKey(tabView, tabView.meta!.matched as string)
|
|
}
|
|
|
|
let routeChildren = navTabs.getTabsViewDataByRoute(currentRoute, 'above')
|
|
if (routeChildren) {
|
|
if (routeChildren.children && routeChildren.children.length > 0) {
|
|
state.routeChildren = routeChildren.children
|
|
} else {
|
|
state.routeChildren = [routeChildren]
|
|
}
|
|
} else if (!state.routeChildren) {
|
|
state.routeChildren = navTabs.state.tabsViewRoutes
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 侧栏菜单滚动条滚动到激活菜单所在位置
|
|
*/
|
|
const verticalMenusScroll = () => {
|
|
setTimeout(() => {
|
|
let activeMenu: HTMLElement | null = document.querySelector('.el-menu.layouts-menu-vertical-children li.is-active')
|
|
if (activeMenu) {
|
|
layoutMenuScrollbarRef.value?.setScrollTop(activeMenu.offsetTop)
|
|
}
|
|
}, 500)
|
|
}
|
|
|
|
onMounted(() => {
|
|
currentRouteActive(route)
|
|
verticalMenusScroll()
|
|
})
|
|
|
|
onBeforeRouteUpdate((to) => {
|
|
currentRouteActive(to)
|
|
})
|
|
</script>
|
|
<style>
|
|
.children-vertical-menus-scrollbar {
|
|
height: v-bind(verticalMenusScrollbarHeight);
|
|
background-color: v-bind('config.getColorVal("menuBackground")');
|
|
}
|
|
.layouts-menu-vertical-children {
|
|
border: 0;
|
|
--el-menu-bg-color: v-bind('config.getColorVal("menuBackground")');
|
|
--el-menu-text-color: v-bind('config.getColorVal("menuColor")');
|
|
--el-menu-active-color: v-bind('config.getColorVal("menuActiveColor")');
|
|
}
|
|
</style>
|