Vue项目中根据电脑的分辨率使用了Zoom缩放导致日期控件和下拉框控件位置偏移；

项目使用的antd vue 1.7的版本；

日期控件修改如下：

  :getCalendarContainer="getCalendarContainer"

props: {
 getCalendarContainer: {
      type: Function,
      default: (node) => node.parentNode || document.body,
    },
}

下拉框控件修改如下：

下拉框在缩放后会导致下拉的朝向计算不正常，这时我们就需要自己手动去修改这个朝向的top 值，因为是手动触发的所以需要加个事件，而且我将处理的代码写成了一个公共的，所以直接复制好吧。代码如下：

组件部分：

  @dropdownVisibleChange="dropdownVisibleChange"

//引入代码
import { dropdownVisibleChangeMixin } from '@/utils/util.js'
//使用代码
 // 监听下拉框的显示隐藏，并处理下拉框显示位置
    dropdownVisibleChange(open) {
      dropdownVisibleChangeMixin(open)
    },

JS公共代码部分：
util.js文件

/**
* 下拉框可见性变化时触发的方法
*
* @param open 是否打开下拉框
* @returns 无返回值
*/
export function dropdownVisibleChangeMixin(open) {
    const screenWidth = window.screen.width * window.devicePixelRatio;
    const validWidths = [1024, 1280, 1360, 1366, 1440, 1600];
    if (open) {
        setTimeout(() => {
            if (validWidths.includes(screenWidth)) {
                observeDropdown();
            }
        }, 100);
    }
}
function observeDropdown() {
    const elements = document.querySelectorAll(".ant-select-dropdown");
    // 筛选出符合多个条件的元素
    const filteredElements = Array.from(elements).filter(element => {
        const style = window.getComputedStyle(element);
        return style.display !== 'none'
    });
    if (filteredElements.length > 0) {
        const dropdown = filteredElements[0];
        const observer = new IntersectionObserver(
            entries => {
                entries.forEach(entry => {
                    const { isIntersecting, boundingClientRect } = entry;//
                    if (isIntersecting) {
                        const distanceToBottom = boundingClientRect.bottom - window.innerHeight;
                        if (distanceToBottom > 650) {
                            updateDropdownStyle(dropdown);
                        }
                    }
                });
            },
            {
                root: null, // Use viewport as the root
                threshold: [0],
            }
        );
        observer.observe(dropdown);
    }
}
function updateDropdownStyle(dropdown) {
    // 在这里修改下拉菜单的样式
    dropdown.style.top = "-259px"; // 示例样式
}

以上代码就可以使用了，但是可能还会出现缩放后下拉框弹出的朝向向上，这时就需要在else里面写你的逻辑了。