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

fix: responsive reactive #6213

pull/6215/head
tangjinzhou 2023-01-27 16:54:13 +08:00
parent 9d5343ae9c
commit d211688059
1 changed files with 4 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/_util/responsiveObserve.ts
View File

@ -1,6 +1,6 @@
import { computed } from 'vue';
import type { GlobalToken } from '../theme/interface'; import type { GlobalToken } from '../theme/interface';
import { useToken } from '../theme/internal'; import { useToken } from '../theme/internal';
import useMemo from './hooks/useMemo';
export type Breakpoint = 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'; export type Breakpoint = 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
export type BreakpointMap = Record<Breakpoint, string>; export type BreakpointMap = Record<Breakpoint, string>;
@ -22,10 +22,9 @@ const getResponsiveMap = (token: GlobalToken): BreakpointMap => ({
export default function useResponsiveObserver() { export default function useResponsiveObserver() {
const [, token] = useToken(); const [, token] = useToken();
const responsiveMap: BreakpointMap = getResponsiveMap(token.value);
// To avoid repeat create instance, we add `useMemo` here. return computed(() => {
return useMemo(() => { const responsiveMap: BreakpointMap = getResponsiveMap(token.value);
const subscribers = new Map<Number, SubscribeFunc>(); const subscribers = new Map<Number, SubscribeFunc>();
let subUid = -1; let subUid = -1;
let screens = {}; let screens = {};
@ -82,5 +81,5 @@ export default function useResponsiveObserver() {
}, },
responsiveMap, responsiveMap,
}; };
}, [token]); });
} }