feat: 添加expanded属性,令菜单可以默认打开 (#245)

This commit is contained in:
悠静萝莉 2022-08-02 18:03:12 +08:00 committed by GitHub
parent ddafdc4c88
commit 86eb38220d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 2 deletions

View File

@ -1,12 +1,13 @@
import { defineComponent, PropType, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import union from 'lodash/union';
import { prefix } from '@/config/global';
import pgk from '../../../package.json';
import MenuContent from './MenuContent';
import AssetLogo from '@/assets/assets-t-logo.svg?component';
import AssetLogoFull from '@/assets/assets-logo-full.svg?component';
import { useSettingStore } from '@/store';
import { getActive } from '@/router';
import { getActive, getRoutesExpanded } from '@/router';
const MIN_POINT = 992 - 1;
@ -18,7 +19,8 @@ const useComputed = (props) => {
const defaultExpanded = computed(() => {
const path = getActive();
const parentPath = path.substring(0, path.lastIndexOf('/'));
return parentPath === '' ? [] : [parentPath];
const expanded = getRoutesExpanded();
return union(expanded, parentPath === '' ? [] : [parentPath]);
});
const sideNavCls = computed(() => {

View File

@ -1,4 +1,5 @@
import { useRoute, createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import uniq from 'lodash/uniq';
// 自动导入modules文件夹下所有ts文件
const modules = import.meta.globEager('./modules/**/*.ts');
@ -38,6 +39,25 @@ const defaultRouterList: Array<RouteRecordRaw> = [
export const allRoutes = [...defaultRouterList, ...asyncRouterList];
export const getRoutesExpanded = () => {
const expandedRoutes = [];
allRoutes.forEach((item) => {
if (item.meta && item.meta.expanded) {
expandedRoutes.push(item.path);
}
if (item.children && item.children.length > 0) {
item.children
.filter((child) => child.meta && child.meta.expanded)
.forEach((child: RouteRecordRaw) => {
expandedRoutes.push(item.path);
expandedRoutes.push(`${item.path}/${child.path}`);
});
}
});
return uniq(expandedRoutes);
};
export const getActive = (maxLevel = 3): string => {
const route = useRoute();
if (!route.path) {