Skip to content

Commit

Permalink
feat: plugin-layout 兼容顶部导航栏父菜单没有配置跳转链接的情况
Browse files Browse the repository at this point in the history
  • Loading branch information
ocean-gao committed May 23, 2024
1 parent 4ed0366 commit 380bffe
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 7 deletions.
14 changes: 10 additions & 4 deletions packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,7 @@
:menus="rootMenus"
mode="horizontal"
:inverted="theme === 'dark'"
:navigation="currentNavigation"
/>
<div class="layout-header-custom">
<slot name="renderCustom" :menus="menus" />
Expand Down Expand Up @@ -229,6 +230,7 @@ import { useRoute, useRouter } from '@@/core/coreExports';
import { FAside, FFooter, FHeader, FLayout, FMain } from '@fesjs/fes-design';
import { computed, nextTick, ref, watch } from 'vue';
import defaultLogo from '../assets/logo.png';
import { flatNodes } from '../helpers/utils';
import LayoutMenu from './Menu.vue';
import MultiTabProvider from './MultiTabProvider.vue';
Expand Down Expand Up @@ -335,12 +337,16 @@ export default {
);
const rootMenus = computed(() => {
return props.menus.filter((menu) => {
return menu.path;
}).map((menu) => {
const { children, ...others } = menu;
return props.menus.map((menu) => {
const { children, match, ...others } = menu;
const flatChildren = flatNodes(children || []);
return {
...others,
match: (match || [])
.concat(...flatChildren.map(item => []
.concat(item.match || [])
.concat(item.path)),
),
_children: children,
};
});
Expand Down
28 changes: 25 additions & 3 deletions packages/fes-plugin-layout/src/runtime/views/Menu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ export default {
type: Boolean,
default: false,
},
navigation: String,
},
setup(props) {
const route = useRoute();
Expand All @@ -93,7 +94,13 @@ export default {
if (matchMenus.length === 0) {
return route.path;
}
return matchMenus[0].path;
// 兼容 top-left 布局情况下,匹配菜单可能没有 path 的情况
if (props.navigation === 'top-left') {
return matchMenus[0].value;
}
else {
return matchMenus[0].path;
}
});
const expandedKeysRef = ref(props.expandedKeys);
Expand Down Expand Up @@ -124,12 +131,27 @@ export default {
);
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)) {
window.open(path, '_blank');
}
else if (/^\//.test(path)) {
router.push(path);
router.push({
path,
query: currentMenu.query || {},
params: currentMenu.params || {},
});
}
else {
console.warn('[plugin-layout]: 菜单的path只能是以http(s)开头的网址或者路由地址');
Expand Down

0 comments on commit 380bffe

Please sign in to comment.