From 0419a070413be34ea5455ed955fa51d8c522da86 Mon Sep 17 00:00:00 2001 From: vben <anncwb@126.com> Date: 星期五, 01 一月 2021 23:03:40 +0800 Subject: [PATCH] feat(menu): add mixSideTrigger setting --- src/settings/projectSetting.ts | 2 ++ src/layouts/default/sider/MixSider.vue | 33 ++++++++++++++++++++++++++++++--- src/types/config.d.ts | 1 + src/hooks/setting/useMenuSetting.ts | 3 +++ CHANGELOG.zh_CN.md | 6 ++++++ 5 files changed, 42 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 1ee59e8..1ebcd97 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 ae393ce..566b6a2 100644 --- a/src/hooks/setting/useMenuSetting.ts +++ b/src/hooks/setting/useMenuSetting.ts @@ -33,6 +33,8 @@ 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 @@ getIsMixMode, getIsMixSidebar, getCloseMixSidebarOnChange, + getMixSideTrigger, }; } diff --git a/src/layouts/default/sider/MixSider.vue b/src/layouts/default/sider/MixSider.vue index 3f656d2..96608f9 100644 --- a/src/layouts/default/sider/MixSider.vue +++ b/src/layouts/default/sider/MixSider.vue @@ -10,6 +10,7 @@ open: openMenu, }, ]" + v-bind="getMenuEvents" > <AppLogo :showTitle="false" :class="`${prefixCls}-logo`" /> <ScrollContainer> @@ -23,7 +24,7 @@ ]" v-for="item in menuModules" :key="item.path" - @click="hanldeModuleClick(item.path)" + v-bind="getItemEvents(item)" > <MenuTag :item="item" :showTitle="false" :isHorizontal="false" /> <g-icon @@ -112,6 +113,7 @@ getCanDrag, getCloseMixSidebarOnChange, getMenuTheme, + getMixSideTrigger, } = useMenuSetting(); const { title } = useGlobSetting(); @@ -124,6 +126,16 @@ }; } ); + + const getMenuEvents = computed(() => { + return unref(getMixSideTrigger) === 'hover' + ? { + onMouseleave: () => { + openMenu.value = false; + }, + } + : {}; + }); const getShowDragBar = computed(() => unref(getCanDrag)); @@ -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 567e87d..0038332 100644 --- a/src/settings/projectSetting.ts +++ b/src/settings/projectSetting.ts @@ -108,6 +108,8 @@ accordion: true, // Switch page to close menu closeMixSidebarOnChange: false, + // Module opening method 鈥榗lick鈥� |'hover' + mixSideTrigger: 'hover', }, // Multi-label diff --git a/src/types/config.d.ts b/src/types/config.d.ts index b578a69..15cbb55 100644 --- a/src/types/config.d.ts +++ b/src/types/config.d.ts @@ -20,6 +20,7 @@ accordion: boolean; closeMixSidebarOnChange: boolean; collapsedShowTitle: boolean; + mixSideTrigger: 'click' | 'hover'; } export interface MultiTabsSetting { -- Gitblit v1.8.0