test/ant-design-vue
1
0
Fork 0
mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-12-04 21:18:14 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

perf: update menu

Browse Source
This commit is contained in:
tangjinzhou 2021-08-02 08:52:36 +08:00
parent 386f3d003f
commit 1ed4923ea1
3 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/menu/src/Menu.tsx
View File

@ -373,7 +373,7 @@ export default defineComponent({
registerMenuInfo,
unRegisterMenuInfo,
selectedSubMenuEventKeys,
isRootMenu: true,
isRootMenu: ref(true),
expandIcon: props.expandIcon || slots.expandIcon,
});
return () => {

2
components/menu/src/PopupTrigger.tsx
View File

@ -80,7 +80,7 @@ export default defineComponent({
)}
stretch={mode === 'horizontal' ? 'minWidth' : null}
getPopupContainer={
isRootMenu ? getPopupContainer.value : triggerNode => triggerNode.parentNode
isRootMenu.value ? getPopupContainer.value : triggerNode => triggerNode.parentNode
}
builtinPlacements={placement.value}
popupPlacement={popupPlacement.value}

28
components/menu/src/hooks/useMenuContext.ts
View File

@ -1,8 +1,6 @@
import type { Key } from '../../../_util/type';
import type { ComputedRef, CSSProperties, InjectionKey, PropType, Ref, UnwrapRef } from 'vue';
import { toRef } from 'vue';
import { watchEffect } from 'vue';
import { defineComponent, inject, provide } from 'vue';
import { defineComponent, inject, provide, toRef } from 'vue';
import type {
BuiltinPlacements,
MenuClickEventHandler,
@ -21,7 +19,7 @@ export interface StoreMenuInfo {
parentKeys: ComputedRef<Key[]>;
}
export interface MenuContextProps {
isRootMenu: boolean;
isRootMenu: Ref<boolean>;
store: Ref<Record<string, UnwrapRef<StoreMenuInfo>>>;
registerMenuInfo: (key: string, info: StoreMenuInfo) => void;
@ -115,17 +113,17 @@ const MenuContextProvider = defineComponent({
setup(props, { slots }) {
const menuContext = useInjectMenu();
const newContext = { ...menuContext };
watchEffect(() => {
if (props.mode !== undefined) {
newContext.mode = toRef(props, 'mode');
}
if (props.isRootMenu !== undefined) {
newContext.isRootMenu = props.isRootMenu;
}
if (props.overflowDisabled !== undefined) {
newContext.overflowDisabled = toRef(props, 'overflowDisabled');
}
});
// 确保传入的属性不会动态增删
// 不需要 watch 变化
if (props.mode !== undefined) {
newContext.mode = toRef(props, 'mode');
}
if (props.isRootMenu !== undefined) {
newContext.isRootMenu = toRef(props, 'isRootMenu');
}
if (props.overflowDisabled !== undefined) {
newContext.overflowDisabled = toRef(props, 'overflowDisabled');
}
useProvideMenu(newContext);
return () => slots.default?.();
},