mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
feat: plugin-layout 兼容顶部导航栏父菜单没有配置跳转链接的情况
This commit is contained in:
parent
4ed0366cd6
commit
380bffe831
@ -140,6 +140,7 @@
|
|||||||
:menus="rootMenus"
|
:menus="rootMenus"
|
||||||
mode="horizontal"
|
mode="horizontal"
|
||||||
:inverted="theme === 'dark'"
|
:inverted="theme === 'dark'"
|
||||||
|
:navigation="currentNavigation"
|
||||||
/>
|
/>
|
||||||
<div class="layout-header-custom">
|
<div class="layout-header-custom">
|
||||||
<slot name="renderCustom" :menus="menus" />
|
<slot name="renderCustom" :menus="menus" />
|
||||||
@ -229,6 +230,7 @@ import { useRoute, useRouter } from '@@/core/coreExports';
|
|||||||
import { FAside, FFooter, FHeader, FLayout, FMain } from '@fesjs/fes-design';
|
import { FAside, FFooter, FHeader, FLayout, FMain } from '@fesjs/fes-design';
|
||||||
import { computed, nextTick, ref, watch } from 'vue';
|
import { computed, nextTick, ref, watch } from 'vue';
|
||||||
import defaultLogo from '../assets/logo.png';
|
import defaultLogo from '../assets/logo.png';
|
||||||
|
import { flatNodes } from '../helpers/utils';
|
||||||
import LayoutMenu from './Menu.vue';
|
import LayoutMenu from './Menu.vue';
|
||||||
import MultiTabProvider from './MultiTabProvider.vue';
|
import MultiTabProvider from './MultiTabProvider.vue';
|
||||||
|
|
||||||
@ -335,12 +337,16 @@ export default {
|
|||||||
);
|
);
|
||||||
|
|
||||||
const rootMenus = computed(() => {
|
const rootMenus = computed(() => {
|
||||||
return props.menus.filter((menu) => {
|
return props.menus.map((menu) => {
|
||||||
return menu.path;
|
const { children, match, ...others } = menu;
|
||||||
}).map((menu) => {
|
const flatChildren = flatNodes(children || []);
|
||||||
const { children, ...others } = menu;
|
|
||||||
return {
|
return {
|
||||||
...others,
|
...others,
|
||||||
|
match: (match || [])
|
||||||
|
.concat(...flatChildren.map(item => []
|
||||||
|
.concat(item.match || [])
|
||||||
|
.concat(item.path)),
|
||||||
|
),
|
||||||
_children: children,
|
_children: children,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
@ -73,6 +73,7 @@ export default {
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
navigation: String,
|
||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
@ -93,7 +94,13 @@ export default {
|
|||||||
if (matchMenus.length === 0) {
|
if (matchMenus.length === 0) {
|
||||||
return route.path;
|
return route.path;
|
||||||
}
|
}
|
||||||
|
// 兼容 top-left 布局情况下,匹配菜单可能没有 path 的情况
|
||||||
|
if (props.navigation === 'top-left') {
|
||||||
|
return matchMenus[0].value;
|
||||||
|
}
|
||||||
|
else {
|
||||||
return matchMenus[0].path;
|
return matchMenus[0].path;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const expandedKeysRef = ref(props.expandedKeys);
|
const expandedKeysRef = ref(props.expandedKeys);
|
||||||
@ -124,12 +131,27 @@ export default {
|
|||||||
);
|
);
|
||||||
|
|
||||||
const onMenuClick = (e) => {
|
const onMenuClick = (e) => {
|
||||||
const path = e.value;
|
let path = e.value;
|
||||||
|
let currentMenu = menuArray.value.find(item => item.value === path);
|
||||||
|
|
||||||
|
// 兼容 top-left 顶部导航没有链接的情况
|
||||||
|
if (props.navigation === 'top-left' && currentMenu && !currentMenu.path) {
|
||||||
|
// 判断当前菜单是否有子菜单
|
||||||
|
if (currentMenu._children && currentMenu._children.length > 0) {
|
||||||
|
path = currentMenu._children[0].path;
|
||||||
|
currentMenu = currentMenu._children[0];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (/^https?:\/\//.test(path)) {
|
if (/^https?:\/\//.test(path)) {
|
||||||
window.open(path, '_blank');
|
window.open(path, '_blank');
|
||||||
}
|
}
|
||||||
else if (/^\//.test(path)) {
|
else if (/^\//.test(path)) {
|
||||||
router.push(path);
|
router.push({
|
||||||
|
path,
|
||||||
|
query: currentMenu.query || {},
|
||||||
|
params: currentMenu.params || {},
|
||||||
|
});
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
console.warn('[plugin-layout]: 菜单的path只能是以http(s)开头的网址或者路由地址');
|
console.warn('[plugin-layout]: 菜单的path只能是以http(s)开头的网址或者路由地址');
|
||||||
|
Loading…
x
Reference in New Issue
Block a user