场景
在类后台管理的系统中,当(有垂直滚动时)点击下拉框后滚动页面,会发现下拉项会遮盖住layout
正常页面:
滚动后:
解决
- 在页面滚动或者缩放时隐藏下拉项即可(借助点击目标元素,下拉项会自动隐藏的特点)
let mouseUp = null;
let mouseDown = null;
// 隐藏popper
export const hidePopper = function (cls='.el-popper') {
let dom = document.querySelector(cls);
if(!dom){
return;
}
// 创建鼠标事件
if (!mouseUp || !mouseDown) {
console.log('-----create events-----');
mouseUp = new MouseEvent('mouseup', {
'view': window,
'bubbles': true,
'cancelable': true
});
mouseDown = new MouseEvent('mousedown', {
'view': window,
'bubbles': true,
'cancelable': true
});
}
// 顺序触发mouseDown、mouseUp
dom.dispatchEvent(mouseDown);
dom.dispatchEvent(mouseUp);
}
// 清除鼠标事件
export const delEvents = function () {
console.log('-----delete events-----');
mouseUp = null;
mouseDown = null;
}
/**
* 滚动时隐藏
* @param contain 滚动监听的容器
* @param cls 隐藏的元素class:如下拉、时间弹框等
*/
export const scrollHide = function (contain,cls) {
// 先移除
if(mouseUp||mouseDown){
delEvents();
}
// 再绑定
contain.onscroll = function () {
hidePopper(cls);
}
}
- 使用
// 在container有滚动时
// 隐藏popper类的组件
scrollHide(document.getElementById('container'),'.popper');
// 隐藏下拉项
scrollHide(document.getElementById('container'),'.el-select-dropdown');
// 隐藏时间弹框
scrollHide(document.getElementById('container'),'.el-date-range-picker');