github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

perf: update menu

pull/4459/head
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, registerMenuInfo,
unRegisterMenuInfo, unRegisterMenuInfo,
selectedSubMenuEventKeys, selectedSubMenuEventKeys,
isRootMenu: true, isRootMenu: ref(true),
expandIcon: props.expandIcon || slots.expandIcon, expandIcon: props.expandIcon || slots.expandIcon,
}); });
return () => { return () => {

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

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

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

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