feat(menu): add mixSideTrigger setting

This commit is contained in:
vben 2021-01-01 23:03:40 +08:00
parent 799a694b25
commit 0419a07041
5 changed files with 42 additions and 3 deletions

View File

@ -1,3 +1,9 @@
## Wip
### ✨ Features
- 新增`mixSideTrigger`配置。用于配置左侧混合模式菜单打开方式。可选`hover`,默认`click`
## 2.0.0-rc.15 (2020-12-31) ## 2.0.0-rc.15 (2020-12-31)
### ✨ 表格破坏性更新 ### ✨ 表格破坏性更新

View File

@ -33,6 +33,8 @@ const getSplit = computed(() => unref(getMenuSetting).split);
const getMenuBgColor = computed(() => unref(getMenuSetting).bgColor); const getMenuBgColor = computed(() => unref(getMenuSetting).bgColor);
const getMixSideTrigger = computed(() => unref(getMenuSetting).mixSideTrigger);
const getCanDrag = computed(() => unref(getMenuSetting).canDrag); const getCanDrag = computed(() => unref(getMenuSetting).canDrag);
const getAccordion = computed(() => unref(getMenuSetting).accordion); const getAccordion = computed(() => unref(getMenuSetting).accordion);
@ -145,5 +147,6 @@ export function useMenuSetting() {
getIsMixMode, getIsMixMode,
getIsMixSidebar, getIsMixSidebar,
getCloseMixSidebarOnChange, getCloseMixSidebarOnChange,
getMixSideTrigger,
}; };
} }

View File

@ -10,6 +10,7 @@
open: openMenu, open: openMenu,
}, },
]" ]"
v-bind="getMenuEvents"
> >
<AppLogo :showTitle="false" :class="`${prefixCls}-logo`" /> <AppLogo :showTitle="false" :class="`${prefixCls}-logo`" />
<ScrollContainer> <ScrollContainer>
@ -23,7 +24,7 @@
]" ]"
v-for="item in menuModules" v-for="item in menuModules"
:key="item.path" :key="item.path"
@click="hanldeModuleClick(item.path)" v-bind="getItemEvents(item)"
> >
<MenuTag :item="item" :showTitle="false" :isHorizontal="false" /> <MenuTag :item="item" :showTitle="false" :isHorizontal="false" />
<g-icon <g-icon
@ -112,6 +113,7 @@
getCanDrag, getCanDrag,
getCloseMixSidebarOnChange, getCloseMixSidebarOnChange,
getMenuTheme, getMenuTheme,
getMixSideTrigger,
} = useMenuSetting(); } = useMenuSetting();
const { title } = useGlobSetting(); const { title } = useGlobSetting();
@ -125,6 +127,16 @@
} }
); );
const getMenuEvents = computed(() => {
return unref(getMixSideTrigger) === 'hover'
? {
onMouseleave: () => {
openMenu.value = false;
},
}
: {};
});
const getShowDragBar = computed(() => unref(getCanDrag)); const getShowDragBar = computed(() => unref(getCanDrag));
onMounted(async () => { onMounted(async () => {
@ -139,11 +151,13 @@
} }
}); });
async function hanldeModuleClick(path: string) { async function hanldeModuleClick(path: string, hover = false) {
const children = await getChildrenMenus(path); const children = await getChildrenMenus(path);
if (unref(activePath) === path) { if (unref(activePath) === path) {
if (!hover) {
openMenu.value = !unref(openMenu); openMenu.value = !unref(openMenu);
}
if (!unref(openMenu)) { if (!unref(openMenu)) {
setActive(); setActive();
} }
@ -178,6 +192,17 @@
setActive(); setActive();
} }
function getItemEvents(item: Menu) {
if (unref(getMixSideTrigger) === 'hover') {
return {
onMouseenter: () => hanldeModuleClick(item.path, true),
};
}
return {
onClick: () => hanldeModuleClick(item.path),
};
}
return { return {
t, t,
prefixCls, prefixCls,
@ -194,6 +219,8 @@
title, title,
openMenu, openMenu,
getMenuTheme, getMenuTheme,
getItemEvents,
getMenuEvents,
}; };
}, },
}); });

View File

@ -108,6 +108,8 @@ const setting: ProjectConfig = {
accordion: true, accordion: true,
// Switch page to close menu // Switch page to close menu
closeMixSidebarOnChange: false, closeMixSidebarOnChange: false,
// Module opening method click |'hover'
mixSideTrigger: 'hover',
}, },
// Multi-label // Multi-label

View File

@ -20,6 +20,7 @@ export interface MenuSetting {
accordion: boolean; accordion: boolean;
closeMixSidebarOnChange: boolean; closeMixSidebarOnChange: boolean;
collapsedShowTitle: boolean; collapsedShowTitle: boolean;
mixSideTrigger: 'click' | 'hover';
} }
export interface MultiTabsSetting { export interface MultiTabsSetting {