test/ant-design-vue
1
0
Fork 0
mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-11-29 18:48:32 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix: select position align not update #3085

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