项目使用的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里面写你的逻辑了。