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

fix: select position align not update #3085

pull/3089/head
tanjinzhou 2020-11-02 18:45:29 +08:00
parent 8dc62f59bb
commit 0302908cb0
1 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/vc-align/Align.jsx
View File

@ -4,7 +4,6 @@ import { alignElement, alignPoint } from 'dom-align';
import addEventListener from '../vc-util/Dom/addEventListener'; import addEventListener from '../vc-util/Dom/addEventListener';
import { isWindow, buffer, isSamePoint, restoreFocus, monitorResize } from './util'; import { isWindow, buffer, isSamePoint, restoreFocus, monitorResize } from './util';
import { cloneElement } from '../_util/vnode'; import { cloneElement } from '../_util/vnode';
import clonedeep from 'lodash-es/cloneDeep';
import { getSlot, findDOMNode } from '../_util/props-util'; import { getSlot, findDOMNode } from '../_util/props-util';
import useBuffer from './hooks/useBuffer'; import useBuffer from './hooks/useBuffer';
import isVisible from '../vc-util/Dom/isVisible'; import isVisible from '../vc-util/Dom/isVisible';
@ -28,10 +27,15 @@ export default defineComponent({
monitorWindowResize: PropTypes.looseBool.def(false), monitorWindowResize: PropTypes.looseBool.def(false),
disabled: PropTypes.looseBool.def(false), disabled: PropTypes.looseBool.def(false),
}, },
setup() {
return {
aligned: false,
sourceResizeMonitor: { cancel: () => {} },
resizeMonitor: { cancel: () => {} },
cacheInfo: {},
};
},
data() { data() {
this.aligned = false;
this.sourceResizeMonitor = { cancel: () => {} };
this.resizeMonitor = { cancel: () => {} };
this.prevProps = { ...this.$props }; this.prevProps = { ...this.$props };
const [forceAlign, cancelForceAlign] = useBuffer(this.goAlign, 0); const [forceAlign, cancelForceAlign] = useBuffer(this.goAlign, 0);
return { return {
@ -48,6 +52,7 @@ export default defineComponent({
this.startMonitorWindowResize(); this.startMonitorWindowResize();
} }
this.startMonitorElementResize(); this.startMonitorElementResize();
this.updateCache();
}); });
}, },
updated() { updated() {
@ -59,9 +64,8 @@ export default defineComponent({
if (prevProps.disabled) { if (prevProps.disabled) {
reAlign = true; reAlign = true;
} else { } else {
const lastElement = getElement(prevProps.target); const { element: lastElement, point: lastPoint } = this.cacheInfo;
const currentElement = getElement(props.target); const currentElement = getElement(props.target);
const lastPoint = getPoint(prevProps.target);
const currentPoint = getPoint(props.target); const currentPoint = getPoint(props.target);
if (isWindow(lastElement) && isWindow(currentElement)) { if (isWindow(lastElement) && isWindow(currentElement)) {
// Skip if is window // Skip if is window
@ -86,7 +90,8 @@ export default defineComponent({
} else { } else {
this.stopMonitorWindowResize(); this.stopMonitorWindowResize();
} }
this.prevProps = { ...this.$props, align: clonedeep(this.$props.align) }; this.prevProps = { ...this.$props };
this.updateCache();
}); });
}, },
beforeUnmount() { beforeUnmount() {
@ -96,12 +101,18 @@ export default defineComponent({
this.cancelForceAlign(); this.cancelForceAlign();
}, },
methods: { methods: {
updateCache() {
const element = getElement(this.$props.target);
const point = getPoint(this.$props.target);
this.cacheInfo = {
element,
point,
};
},
startMonitorElementResize() { startMonitorElementResize() {
const prevProps = this.prevProps;
const props = this.$props; const props = this.$props;
const lastElement = getElement(prevProps.target); const { element: lastElement, point: lastPoint } = this.cacheInfo;
const currentElement = getElement(props.target); const currentElement = getElement(props.target);
const lastPoint = getPoint(prevProps.target);
const currentPoint = getPoint(props.target); const currentPoint = getPoint(props.target);
const source = findDOMNode(this); const source = findDOMNode(this);
const { sourceResizeMonitor, resizeMonitor } = this; const { sourceResizeMonitor, resizeMonitor } = this;
@ -111,7 +122,7 @@ export default defineComponent({
sourceResizeMonitor.cancel = monitorResize(source, this.forceAlign); sourceResizeMonitor.cancel = monitorResize(source, this.forceAlign);
} }
if (lastElement !== currentElement || !isSamePoint(lastPoint, currentPoint)) { if (lastElement !== currentElement || !isSamePoint(lastPoint, currentPoint)) {
//this.forceAlign(); this.forceAlign();
// Add resize observer // Add resize observer
if (resizeMonitor.element !== currentElement) { if (resizeMonitor.element !== currentElement) {
resizeMonitor?.cancel(); resizeMonitor?.cancel();