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

fix: menu not update

pull/4137/head
tangjinzhou 2021-05-28 22:33:10 +08:00
parent c2bba2eb28
commit 0a2940e4ad
4 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,6 @@ import {
inject, inject,
watchEffect, watchEffect,
watch, watch,
reactive,
onMounted, onMounted,
unref, unref,
UnwrapRef, UnwrapRef,
@ -73,7 +72,7 @@ export default defineComponent({
], ],
setup(props, { slots, emit }) { setup(props, { slots, emit }) {
const { prefixCls, direction } = useConfigInject('menu', props); const { prefixCls, direction } = useConfigInject('menu', props);
const store = reactive<Record<string, StoreMenuInfo>>({}); const store = ref<Record<string, StoreMenuInfo>>({});
const siderCollapsed = inject(SiderCollapsedKey, ref(undefined)); const siderCollapsed = inject(SiderCollapsedKey, ref(undefined));
const inlineCollapsed = computed(() => { const inlineCollapsed = computed(() => {
if (siderCollapsed.value !== undefined) { if (siderCollapsed.value !== undefined) {
@ -107,7 +106,7 @@ export default defineComponent({
store, store,
() => { () => {
const newKeyMapStore = {}; const newKeyMapStore = {};
for (const [, menuInfo] of Object.entries(store)) { for (const menuInfo of Object.values(store.value)) {
newKeyMapStore[menuInfo.key] = menuInfo; newKeyMapStore[menuInfo.key] = menuInfo;
} }
keyMapStore.value = newKeyMapStore; keyMapStore.value = newKeyMapStore;
@ -300,8 +299,9 @@ export default defineComponent({
const getChildrenKeys = (eventKeys: string[] = []): Key[] => { const getChildrenKeys = (eventKeys: string[] = []): Key[] => {
const keys = []; const keys = [];
const storeValue = store.value;
eventKeys.forEach(eventKey => { eventKeys.forEach(eventKey => {
const { key, childrenEventKeys } = store[eventKey]; const { key, childrenEventKeys } = storeValue[eventKey];
keys.push(key, ...getChildrenKeys(childrenEventKeys)); keys.push(key, ...getChildrenKeys(childrenEventKeys));
}); });
return keys; return keys;
@ -317,7 +317,7 @@ export default defineComponent({
}; };
const onInternalOpenChange = (eventKey: Key, open: boolean) => { const onInternalOpenChange = (eventKey: Key, open: boolean) => {
const { key, childrenEventKeys } = store[eventKey]; const { key, childrenEventKeys } = store.value[eventKey];
let newOpenKeys = mergedOpenKeys.value.filter(k => k !== key); let newOpenKeys = mergedOpenKeys.value.filter(k => k !== key);
if (open) { if (open) {
@ -334,10 +334,11 @@ export default defineComponent({
}; };
const registerMenuInfo = (key: string, info: StoreMenuInfo) => { const registerMenuInfo = (key: string, info: StoreMenuInfo) => {
store[key] = info as any; store.value = { ...store.value, [key]: info as any };
}; };
const unRegisterMenuInfo = (key: string) => { const unRegisterMenuInfo = (key: string) => {
delete store[key]; delete store.value[key];
store.value = { ...store.value };
}; };
useProvideMenu({ useProvideMenu({
@ -370,8 +371,9 @@ export default defineComponent({
isRootMenu: true, isRootMenu: true,
}); });
return () => { return () => {
// data-hack-store-update 初步判断是 vue bug，先用hack方式
return ( return (
<ul class={className.value} tabindex="0"> <ul data-hack-store-update={store.value} class={className.value} tabindex="0">
{slots.default?.()} {slots.default?.()}
</ul> </ul>
); );

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

@ -89,7 +89,7 @@ export default defineComponent({
mouseEnterDelay={subMenuOpenDelay.value} mouseEnterDelay={subMenuOpenDelay.value}
mouseLeaveDelay={subMenuCloseDelay.value} mouseLeaveDelay={subMenuCloseDelay.value}
onPopupVisibleChange={onVisibleChange} onPopupVisibleChange={onVisibleChange}
// forceRender={forceSubMenuRender} forceRender={true}
v-slots={{ v-slots={{
popup: () => { popup: () => {
return slots.popup?.({ visible: innerVisible.value }); return slots.popup?.({ visible: innerVisible.value });

8
components/menu/src/SubMenu.tsx
View File

@ -44,9 +44,13 @@ export default defineComponent({
useProvideFirstLevel(false); useProvideFirstLevel(false);
const instance = getCurrentInstance(); const instance = getCurrentInstance();
const key = instance.vnode.key; const key =
instance.vnode.key !== null ? instance.vnode.key : `sub_menu_${++indexGuid}_$$_not_set_key`;
const eventKey = `sub_menu_${++indexGuid}_$$_${key}`; const eventKey =
instance.vnode.key !== null
? `sub_menu_${++indexGuid}_$$_${instance.vnode.key}`
: (key as string);
const { parentEventKeys, parentInfo, parentKeys } = useInjectKeyPath(); const { parentEventKeys, parentInfo, parentKeys } = useInjectKeyPath();
const keysPath = computed(() => [...parentKeys.value, key]); const keysPath = computed(() => [...parentKeys.value, key]);
const eventKeysPath = computed(() => [...parentEventKeys.value, eventKey]); const eventKeysPath = computed(() => [...parentEventKeys.value, eventKey]);

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

@ -29,7 +29,7 @@ export interface StoreMenuInfo {
export interface MenuContextProps { export interface MenuContextProps {
isRootMenu: boolean; isRootMenu: boolean;
store: UnwrapRef<Record<string, StoreMenuInfo>>; store: Ref<Record<string, UnwrapRef<StoreMenuInfo>>>;
registerMenuInfo: (key: string, info: StoreMenuInfo) => void; registerMenuInfo: (key: string, info: StoreMenuInfo) => void;
unRegisterMenuInfo: (key: string) => void; unRegisterMenuInfo: (key: string) => void;
prefixCls: ComputedRef<string>; prefixCls: ComputedRef<string>;