refactor: menu
parent
11c742b772
commit
08533c772d
|
@ -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>;
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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?.()}
|
||||||
|
|
|
@ -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
2
v2-doc
|
@ -1 +1 @@
|
||||||
Subproject commit d197053285b81e77718621c0b5b94cb3b21831a2
|
Subproject commit a7013ae87f69dcbcf547f4b023255b8a7a775557
|
Loading…
Reference in New Issue