fix(menu): fix mix-menu incorrect jumping in hover mode

修复悬停触发模式下左侧混合菜单会在没有子菜单且被激活时直接跳转路由
This commit is contained in:
无木 2021-07-09 19:20:05 +08:00
parent 5ceeefd17d
commit cad021c34b
2 changed files with 21 additions and 16 deletions

View File

@ -8,12 +8,14 @@
- **TableAction** 仅在 action.tooltip 存在的情况下 才包裹 Tooltip 组件 - **TableAction** 仅在 action.tooltip 存在的情况下 才包裹 Tooltip 组件
- **BasicUpload** 修复处理非`array`值时报错的问题 - **BasicUpload** 修复处理非`array`值时报错的问题
- **Form** 修复`FormItem`的`suffix`插槽样式问题 - **Form** 修复`FormItem`的`suffix`插槽样式问题
- **Menu**
- 修复左侧混合菜单的悬停触发逻辑
- 修复顶栏菜单在显示包含需要隐藏的菜单项目时出错的问题
- 修复悬停触发模式下左侧混合菜单会在没有子菜单且被激活时直接跳转路由
- **其它** - **其它**
- 修复菜单默认折叠的配置不起作用的问题 - 修复菜单默认折叠的配置不起作用的问题
- 修复`safari`浏览器报错导致网站打不开 - 修复`safari`浏览器报错导致网站打不开
- 修复在 window 上,拉取代码后 eslint 因 endOfLine 而保错问题 - 修复在 window 上,拉取代码后 eslint 因 endOfLine 而保错问题
- 修复左侧混合菜单的悬停触发逻辑
- 修复顶栏菜单在显示包含需要隐藏的菜单项目时出错的问题
### 🎫 Chores ### 🎫 Chores

View File

@ -63,7 +63,7 @@
</div> </div>
<ScrollContainer :class="`${prefixCls}-menu-list__content`"> <ScrollContainer :class="`${prefixCls}-menu-list__content`">
<SimpleMenu <SimpleMenu
:items="chilrenMenus" :items="childrenMenus"
:theme="getMenuTheme" :theme="getMenuTheme"
mixSider mixSider
@menuClick="handleMenuClick" @menuClick="handleMenuClick"
@ -114,7 +114,7 @@
setup() { setup() {
let menuModules = ref<Menu[]>([]); let menuModules = ref<Menu[]>([]);
const activePath = ref(''); const activePath = ref('');
const chilrenMenus = ref<Menu[]>([]); const childrenMenus = ref<Menu[]>([]);
const openMenu = ref(false); const openMenu = ref(false);
const dragBarRef = ref<ElRef>(null); const dragBarRef = ref<ElRef>(null);
const sideRef = ref<ElRef>(null); const sideRef = ref<ElRef>(null);
@ -150,7 +150,7 @@
const getIsFixed = computed(() => { const getIsFixed = computed(() => {
/* eslint-disable-next-line */ /* eslint-disable-next-line */
mixSideHasChildren.value = unref(chilrenMenus).length > 0; mixSideHasChildren.value = unref(childrenMenus).length > 0;
const isFixed = unref(getMixSideFixed) && unref(mixSideHasChildren); const isFixed = unref(getMixSideFixed) && unref(mixSideHasChildren);
if (isFixed) { if (isFixed) {
/* eslint-disable-next-line */ /* eslint-disable-next-line */
@ -209,9 +209,8 @@
} }
// Process module menu click // Process module menu click
async function hanldeModuleClick(path: string, hover = false) { async function handleModuleClick(path: string, hover = false) {
const children = await getChildrenMenus(path); const children = await getChildrenMenus(path);
if (unref(activePath) === path) { if (unref(activePath) === path) {
if (!hover) { if (!hover) {
if (!unref(openMenu)) { if (!unref(openMenu)) {
@ -233,12 +232,12 @@
} }
if (!children || children.length === 0) { if (!children || children.length === 0) {
go(path); if (!hover) go(path);
chilrenMenus.value = []; childrenMenus.value = [];
closeMenu(); closeMenu();
return; return;
} }
chilrenMenus.value = children; childrenMenus.value = children;
} }
// Set the currently active menu and submenu // Set the currently active menu and submenu
@ -253,14 +252,14 @@
if (p) { if (p) {
const children = await getChildrenMenus(p); const children = await getChildrenMenus(p);
if (setChildren) { if (setChildren) {
chilrenMenus.value = children; childrenMenus.value = children;
if (unref(getMixSideFixed)) { if (unref(getMixSideFixed)) {
openMenu.value = children.length > 0; openMenu.value = children.length > 0;
} }
} }
if (children.length === 0) { if (children.length === 0) {
chilrenMenus.value = []; childrenMenus.value = [];
} }
} }
} }
@ -278,11 +277,15 @@
function getItemEvents(item: Menu) { function getItemEvents(item: Menu) {
if (unref(getMixSideTrigger) === 'hover') { if (unref(getMixSideTrigger) === 'hover') {
return { 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 { return {
onClick: () => hanldeModuleClick(item.path), onClick: () => handleModuleClick(item.path),
}; };
} }
@ -303,9 +306,9 @@
t, t,
prefixCls, prefixCls,
menuModules, menuModules,
hanldeModuleClick, handleModuleClick: handleModuleClick,
activePath, activePath,
chilrenMenus, childrenMenus: childrenMenus,
getShowDragBar, getShowDragBar,
handleMenuClick, handleMenuClick,
getMenuStyle, getMenuStyle,