From cad021c34b71fa109640af75a0c2b72179e9e257 Mon Sep 17 00:00:00 2001
From: 无木 <netfan@foxmail.com>
Date: Fri, 9 Jul 2021 19:20:05 +0800
Subject: [PATCH] fix(menu): fix mix-menu incorrect jumping in `hover` mode
---
CHANGELOG.zh_CN.md | 6 ++++--
src/layouts/default/sider/MixSider.vue | 31 +++++++++++++++++--------------
2 files changed, 21 insertions(+), 16 deletions(-)
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index c73a340..26c28c2 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -8,12 +8,14 @@
- **TableAction** 仅在 action.tooltip 存在的情况下 才包裹 Tooltip 组件
- **BasicUpload** 修复处理非`array`值时报错的问题
- **Form** 修复`FormItem`的`suffix`插槽样式问题
+- **Menu**
+ - 修复左侧混合菜单的悬停触发逻辑
+ - 修复顶栏菜单在显示包含需要隐藏的菜单项目时出错的问题
+ - 修复悬停触发模式下左侧混合菜单会在没有子菜单且被激活时直接跳转路由
- **其它**
- 修复菜单默认折叠的配置不起作用的问题
- 修复`safari`浏览器报错导致网站打不开
- 修复在 window 上，拉取代码后 eslint 因 endOfLine 而保错问题
- - 修复左侧混合菜单的悬停触发逻辑
- - 修复顶栏菜单在显示包含需要隐藏的菜单项目时出错的问题
### 🎫 Chores
diff --git a/src/layouts/default/sider/MixSider.vue b/src/layouts/default/sider/MixSider.vue
index ee3c661..00f700c 100644
--- a/src/layouts/default/sider/MixSider.vue
+++ b/src/layouts/default/sider/MixSider.vue
@@ -63,7 +63,7 @@
</div>
<ScrollContainer :class="`${prefixCls}-menu-list__content`">
<SimpleMenu
- :items="chilrenMenus"
+ :items="childrenMenus"
:theme="getMenuTheme"
mixSider
@menuClick="handleMenuClick"
@@ -114,7 +114,7 @@
setup() {
let menuModules = ref<Menu[]>([]);
const activePath = ref('');
- const chilrenMenus = ref<Menu[]>([]);
+ const childrenMenus = ref<Menu[]>([]);
const openMenu = ref(false);
const dragBarRef = ref<ElRef>(null);
const sideRef = ref<ElRef>(null);
@@ -150,7 +150,7 @@
const getIsFixed = computed(() => {
/* eslint-disable-next-line */
- mixSideHasChildren.value = unref(chilrenMenus).length > 0;
+ mixSideHasChildren.value = unref(childrenMenus).length > 0;
const isFixed = unref(getMixSideFixed) && unref(mixSideHasChildren);
if (isFixed) {
/* eslint-disable-next-line */
@@ -209,9 +209,8 @@
}
// Process module menu click
- async function hanldeModuleClick(path: string, hover = false) {
+ async function handleModuleClick(path: string, hover = false) {
const children = await getChildrenMenus(path);
-
if (unref(activePath) === path) {
if (!hover) {
if (!unref(openMenu)) {
@@ -233,12 +232,12 @@
}
if (!children || children.length === 0) {
- go(path);
- chilrenMenus.value = [];
+ if (!hover) go(path);
+ childrenMenus.value = [];
closeMenu();
return;
}
- chilrenMenus.value = children;
+ childrenMenus.value = children;
}
// Set the currently active menu and submenu
@@ -253,14 +252,14 @@
if (p) {
const children = await getChildrenMenus(p);
if (setChildren) {
- chilrenMenus.value = children;
+ childrenMenus.value = children;
if (unref(getMixSideFixed)) {
openMenu.value = children.length > 0;
}
}
if (children.length === 0) {
- chilrenMenus.value = [];
+ childrenMenus.value = [];
}
}
}
@@ -278,11 +277,15 @@
function getItemEvents(item: Menu) {
if (unref(getMixSideTrigger) === 'hover') {
return {
- onMouseenter: () => hanldeModuleClick(item.path, true),
+ onMouseenter: () => handleModuleClick(item.path, true),
+ onClick: async () => {
+ const children = await getChildrenMenus(item.path);
+ if (item.path && (!children || children.length === 0)) go(item.path);
+ },
};
}
return {
- onClick: () => hanldeModuleClick(item.path),
+ onClick: () => handleModuleClick(item.path),
};
}
@@ -303,9 +306,9 @@
t,
prefixCls,
menuModules,
- hanldeModuleClick,
+ handleModuleClick: handleModuleClick,
activePath,
- chilrenMenus,
+ childrenMenus: childrenMenus,
getShowDragBar,
handleMenuClick,
getMenuStyle,
--
libgit2 0.23.3