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 align

refactor-date
tangjinzhou 2021-08-12 10:07:15 +08:00
parent f32cbaf306
commit deca1546d7
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/vc-align/Align.tsx
View File

@ -8,6 +8,7 @@ import isVisible from '../vc-util/Dom/isVisible';
import { isSamePoint, restoreFocus, monitorResize } from './util'; import { isSamePoint, restoreFocus, monitorResize } from './util';
import type { AlignType, AlignResult, TargetType, TargetPoint } from './interface'; import type { AlignType, AlignResult, TargetType, TargetPoint } from './interface';
import useBuffer from './hooks/useBuffer'; import useBuffer from './hooks/useBuffer';
import isEqual from 'lodash-es/isEqual';
type OnAlign = (source: HTMLElement, result: AlignResult) => void; type OnAlign = (source: HTMLElement, result: AlignResult) => void;
@ -53,11 +54,12 @@ export default defineComponent({
props: alignProps, props: alignProps,
emits: ['align'], emits: ['align'],
setup(props, { expose, slots }) { setup(props, { expose, slots }) {
const cacheRef = ref<{ element?: HTMLElement; point?: TargetPoint }>({}); const cacheRef = ref<{ element?: HTMLElement; point?: TargetPoint; align?: AlignType }>({});
const nodeRef = ref(); const nodeRef = ref();
const forceAlignPropsRef = computed(() => ({ const forceAlignPropsRef = computed(() => ({
disabled: props.disabled, disabled: props.disabled,
target: props.target, target: props.target,
align: props.align,
onAlign: props.onAlign, onAlign: props.onAlign,
})); }));
@ -66,6 +68,7 @@ export default defineComponent({
const { const {
disabled: latestDisabled, disabled: latestDisabled,
target: latestTarget, target: latestTarget,
align: latestAlign,
onAlign: latestOnAlign, onAlign: latestOnAlign,
} = forceAlignPropsRef.value; } = forceAlignPropsRef.value;
if (!latestDisabled && latestTarget && nodeRef.value && nodeRef.value.$el) { if (!latestDisabled && latestTarget && nodeRef.value && nodeRef.value.$el) {
@ -77,16 +80,16 @@ export default defineComponent({
cacheRef.value.element = element; cacheRef.value.element = element;
cacheRef.value.point = point; cacheRef.value.point = point;
cacheRef.value.align = latestAlign;
// IE lose focus after element realign // IE lose focus after element realign
// We should record activeElement and restore later // We should record activeElement and restore later
const { activeElement } = document; const { activeElement } = document;
// We only align when element is visible // We only align when element is visible
if (element && isVisible(element)) { if (element && isVisible(element)) {
result = alignElement(source, element, props.align); result = alignElement(source, element, latestAlign);
} else if (point) { } else if (point) {
result = alignPoint(source, point, props.align); result = alignPoint(source, point, latestAlign);
} }
restoreFocus(activeElement, source); restoreFocus(activeElement, source);
@ -124,7 +127,11 @@ export default defineComponent({
sourceResizeMonitor.value.cancel = monitorResize(nodeRef.value.$el, forceAlign); sourceResizeMonitor.value.cancel = monitorResize(nodeRef.value.$el, forceAlign);
} }
if (cacheRef.value.element !== element || !isSamePoint(cacheRef.value.point, point)) { if (
cacheRef.value.element !== element ||
!isSamePoint(cacheRef.value.point, point) ||
!isEqual(cacheRef.value.align, props.align)
) {
forceAlign(); forceAlign();
// Add resize observer // Add resize observer