当前位置：首页 > news >正文

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

news 2025/11/24 6:59:44

项目使用的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 rootthreshold: [0],});observer.observe(dropdown);}
}
function updateDropdownStyle(dropdown) {// 在这里修改下拉菜单的样式dropdown.style.top = "-259px"; // 示例样式
}