diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 1ee59e8a..1ebcd97b 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -1,3 +1,9 @@
+## Wip
+
+### ✨ Features
+
+- 新增`mixSideTrigger`配置。用于配置左侧混合模式菜单打开方式。可选`hover`,默认`click`
+
## 2.0.0-rc.15 (2020-12-31)
### ✨ 表格破坏性更新
diff --git a/src/hooks/setting/useMenuSetting.ts b/src/hooks/setting/useMenuSetting.ts
index ae393ce6..566b6a22 100644
--- a/src/hooks/setting/useMenuSetting.ts
+++ b/src/hooks/setting/useMenuSetting.ts
@@ -33,6 +33,8 @@ const getSplit = computed(() => unref(getMenuSetting).split);
const getMenuBgColor = computed(() => unref(getMenuSetting).bgColor);
+const getMixSideTrigger = computed(() => unref(getMenuSetting).mixSideTrigger);
+
const getCanDrag = computed(() => unref(getMenuSetting).canDrag);
const getAccordion = computed(() => unref(getMenuSetting).accordion);
@@ -145,5 +147,6 @@ export function useMenuSetting() {
getIsMixMode,
getIsMixSidebar,
getCloseMixSidebarOnChange,
+ getMixSideTrigger,
};
}
diff --git a/src/layouts/default/sider/MixSider.vue b/src/layouts/default/sider/MixSider.vue
index 3f656d29..96608f94 100644
--- a/src/layouts/default/sider/MixSider.vue
+++ b/src/layouts/default/sider/MixSider.vue
@@ -10,6 +10,7 @@
open: openMenu,
},
]"
+ v-bind="getMenuEvents"
>
@@ -23,7 +24,7 @@
]"
v-for="item in menuModules"
:key="item.path"
- @click="hanldeModuleClick(item.path)"
+ v-bind="getItemEvents(item)"
>
{
+ return unref(getMixSideTrigger) === 'hover'
+ ? {
+ onMouseleave: () => {
+ openMenu.value = false;
+ },
+ }
+ : {};
+ });
+
const getShowDragBar = computed(() => unref(getCanDrag));
onMounted(async () => {
@@ -139,11 +151,13 @@
}
});
- async function hanldeModuleClick(path: string) {
+ async function hanldeModuleClick(path: string, hover = false) {
const children = await getChildrenMenus(path);
if (unref(activePath) === path) {
- openMenu.value = !unref(openMenu);
+ if (!hover) {
+ openMenu.value = !unref(openMenu);
+ }
if (!unref(openMenu)) {
setActive();
}
@@ -178,6 +192,17 @@
setActive();
}
+ function getItemEvents(item: Menu) {
+ if (unref(getMixSideTrigger) === 'hover') {
+ return {
+ onMouseenter: () => hanldeModuleClick(item.path, true),
+ };
+ }
+ return {
+ onClick: () => hanldeModuleClick(item.path),
+ };
+ }
+
return {
t,
prefixCls,
@@ -194,6 +219,8 @@
title,
openMenu,
getMenuTheme,
+ getItemEvents,
+ getMenuEvents,
};
},
});
diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts
index 567e87d8..0038332a 100644
--- a/src/settings/projectSetting.ts
+++ b/src/settings/projectSetting.ts
@@ -108,6 +108,8 @@ const setting: ProjectConfig = {
accordion: true,
// Switch page to close menu
closeMixSidebarOnChange: false,
+ // Module opening method ‘click’ |'hover'
+ mixSideTrigger: 'hover',
},
// Multi-label
diff --git a/src/types/config.d.ts b/src/types/config.d.ts
index b578a695..15cbb558 100644
--- a/src/types/config.d.ts
+++ b/src/types/config.d.ts
@@ -20,6 +20,7 @@ export interface MenuSetting {
accordion: boolean;
closeMixSidebarOnChange: boolean;
collapsedShowTitle: boolean;
+ mixSideTrigger: 'click' | 'hover';
}
export interface MultiTabsSetting {