refactor: menu

feat-new-menu
tanjinzhou 2021-05-21 17:04:48 +08:00
parent 11c742b772
commit 08533c772d
5 changed files with 13 additions and 7 deletions

View File

@ -320,6 +320,7 @@ export default defineComponent({
registerMenuInfo, registerMenuInfo,
unRegisterMenuInfo, unRegisterMenuInfo,
selectedSubMenuEventKeys, selectedSubMenuEventKeys,
isRootMenu: true,
}); });
return () => { return () => {
return <ul class={className.value}>{slots.default?.()}</ul>; return <ul class={className.value}>{slots.default?.()}</ul>;

View File

@ -36,6 +36,7 @@ export default defineComponent({
subMenuCloseDelay, subMenuCloseDelay,
builtinPlacements, builtinPlacements,
triggerSubMenuAction, triggerSubMenuAction,
isRootMenu,
} = useInjectMenu(); } = useInjectMenu();
const placement = computed(() => const placement = computed(() =>
@ -77,7 +78,9 @@ export default defineComponent({
popupClassName, popupClassName,
)} )}
stretch={mode === 'horizontal' ? 'minWidth' : null} stretch={mode === 'horizontal' ? 'minWidth' : null}
getPopupContainer={getPopupContainer.value} getPopupContainer={
isRootMenu ? getPopupContainer.value : triggerNode => triggerNode.parentNode
}
builtinPlacements={placement.value} builtinPlacements={placement.value}
popupPlacement={popupPlacement.value} popupPlacement={popupPlacement.value}
popupVisible={innerVisible.value} popupVisible={innerVisible.value}

View File

@ -31,7 +31,7 @@ export default defineComponent({
internalPopupClose: Boolean, internalPopupClose: Boolean,
}, },
slots: ['icon', 'title'], slots: ['icon', 'title'],
emits: ['titleClick', 'titleMouseenter', 'titleMouseleave'], emits: ['titleClick', 'mouseenter', 'mouseleave'],
inheritAttrs: false, inheritAttrs: false,
setup(props, { slots, attrs, emit }) { setup(props, { slots, attrs, emit }) {
useProvideFirstLevel(false); useProvideFirstLevel(false);
@ -130,13 +130,13 @@ export default defineComponent({
const onMouseEnter = (event: MouseEvent) => { const onMouseEnter = (event: MouseEvent) => {
if (!mergedDisabled.value) { if (!mergedDisabled.value) {
changeActiveKeys(keysPath.value); changeActiveKeys(keysPath.value);
emit('titleMouseenter', event); emit('mouseenter', event);
} }
}; };
const onMouseLeave = (event: MouseEvent) => { const onMouseLeave = (event: MouseEvent) => {
if (!mergedDisabled.value) { if (!mergedDisabled.value) {
changeActiveKeys([]); changeActiveKeys([]);
emit('titleMouseleave', event); emit('mouseleave', event);
} }
}; };
@ -245,7 +245,7 @@ export default defineComponent({
onVisibleChange={onPopupVisibleChange} onVisibleChange={onPopupVisibleChange}
v-slots={{ v-slots={{
popup: ({ visible }) => ( popup: ({ visible }) => (
<MenuContextProvider props={{ mode: triggerModeRef }}> <MenuContextProvider props={{ mode: triggerModeRef, isRootMenu: false }}>
<Transition {...mergedMotion.value}> <Transition {...mergedMotion.value}>
<SubMenuList v-show={visible} id={popupId} ref={popupRef}> <SubMenuList v-show={visible} id={popupId} ref={popupRef}>
{slots.default?.()} {slots.default?.()}

View File

@ -26,6 +26,8 @@ export interface StoreMenuInfo {
isLeaf?: boolean; isLeaf?: boolean;
} }
export interface MenuContextProps { export interface MenuContextProps {
isRootMenu: boolean;
store: UnwrapRef<Record<string, StoreMenuInfo>>; store: UnwrapRef<Record<string, StoreMenuInfo>>;
registerMenuInfo: (key: string, info: StoreMenuInfo) => void; registerMenuInfo: (key: string, info: StoreMenuInfo) => void;
unRegisterMenuInfo: (key: string) => void; unRegisterMenuInfo: (key: string) => void;
@ -116,7 +118,7 @@ const MenuContextProvider = defineComponent({
props: Object, props: Object,
}, },
setup(props, { slots }) { setup(props, { slots }) {
useProvideMenu({ ...useInjectMenu(), ...props }); useProvideMenu({ ...useInjectMenu(), ...props.props });
return () => slots.default?.(); return () => slots.default?.();
}, },
}); });

2
v2-doc

@ -1 +1 @@
Subproject commit d197053285b81e77718621c0b5b94cb3b21831a2 Subproject commit a7013ae87f69dcbcf547f4b023255b8a7a775557