页面滚动时隐藏element-ui下拉框/时间弹框

场景

在系统中，当（有垂直滚动时）点击下拉框后滚动页面，会发现下拉项会遮盖住页面中的元素，不会隐藏
 

解决：(以vue为例)

在页面滚动或者缩放时隐藏下拉项即可（借助点击目标元素，下拉项会自动隐藏的特点）

案例代码：

主要逻辑代码：

1、监听当前滚动元素的scroll事件

// window或当前滚动元素的dom节点  
// 滚动监听的容器 滚动容器是哪个就监听哪个
// let scrollDom = document.querySelectorAll('.wrapper')[0];
// scrollDom下滚动或者window下滚动
window.addEventListener('scroll', () => {
   this.scrollHide('.el-select-dropdown');
}, false);

2、定义滚动监听的容器

/**
 * 滚动时隐藏
 * @param cls 隐藏的元素class:如下拉、时间弹框等
*/
scrollHide(cls) {
  if( this.mouseUp || this.mouseDown ) { this.delEvents(); } // 先移除
  this.hidePopper(cls);
},

3、隐藏popper

hidePopper(cls = '.el-popper') {
   const dom = document.querySelector(cls);
   console.log(cls, dom, 9999999);
   if( !dom ){ return; }
   // 创建鼠标事件
   if (!this.mouseUp || !this.mouseDown) {
      console.log('-----create events-----');
      this.mouseUp = new MouseEvent('mouseup', { 'view': window, 'bubbles': true, 'cancelable': true });
      this.mouseDown = new MouseEvent('mousedown', { 'view': window, 'bubbles': true, 'cancelable': true });
    }
    // 顺序触发mouseDown、mouseUp
    dom.dispatchEvent(this.mouseDown);
    dom.dispatchEvent(this.mouseUp);
},

4、清除鼠标事件

delEvents() {
   console.log('-----delete events-----');
   this.mouseUp = null;
   this.mouseDown = null;
},

使用：

1、隐藏下拉项

// 如果是el-table中的select，则监听的dom为.el-table__body-wrapper
// 如果是在自定义的元素里，则监听的dom为自定义滚动的元素 如 .wrapper
window.addEventListener('scroll', () => {
    this.scrollHide('.el-select-dropdown');
}, false);

2、隐藏时间弹框

// 如果是el-table中的select，则监听的dom为.el-table__body-wrapper
// 如果是在自定义的元素里，则监听的dom为自定义滚动的元素 如 .wrapper

window.addEventListener('scroll', () => {
    this.scrollHide('.el-date-range-picker');
}, false);