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

来源：当你点击下拉框，时间框等element组件不选中的时候，滚动页面，组件会随着页面往上走这个时候会有问题，遮住其他容器，位置不对等问题

滚动前：

滚动后

 

这个时候就需要监听当你滚动时 隐藏这些下拉组件

1：创建hideElement.js文件

注：源码地址

let mouseUp = null;
let mouseDown = null;

// 隐藏popper
export const hidePopper = function(cls = '.el-popper') {
  const dom = document.querySelector(cls);
  if (!dom) {
    return;
  }
  // 创建鼠标事件
  if (!mouseUp || !mouseDown) {
    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() {
  mouseUp = null;
  mouseDown = null;
};

/**
 * 滚动时隐藏
 * @param contain 滚动监听的容器
 * @param cls 隐藏的元素class:如下拉、时间弹框等
 */
export const scrollHide = function(contain, cls) {
  // 先移除
  if (mouseUp || mouseDown) {
    delEvents();
  }
  // 再绑定
  contain.onscroll = function() {
    hidePopper(cls);
  };
};

 2：在需要的地方引入

import { scrollHide } from '@/utils/hideElement';

 3：监听滚动，移除监听事件

   created() {
    window.addEventListener('scroll', this.hideSelect, true);
  },
  destroyed() {
    window.removeEventListener('scroll', this.hideSelect, true);
  },
  methods: {
    hideSelect() {
      scrollHide(document.querySelector('.el-dialog__body'), '.el-select-dropdown');
    }