页面滚动时隐藏页面所有element-ui下拉框

/** 
 * 隐藏页面所有element-ui下拉框
 */

let mouseUp = null;
let mouseDown = null;

// 隐藏下拉
export const hideDropdown = function(dom) {
  if(!dom) {
    // 默认为头部标题元素
    dom = document.querySelector('.avue-header .title');
  }
  // 创建鼠标事件
  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就能触发element隐藏下拉框事件
  dom.dispatchEvent(mouseDown);
  dom.dispatchEvent(mouseUp);
}

// 清除鼠标事件
export const delEvents = function() {
  console.log('-----delete events-----');
  mouseUp = null;
  mouseDown = null;
}

// dom 滚动时隐藏下拉框
export const scrollHide = function(dom) {
  dom.onscroll = function() {
    hideDropdown();
  }
}
posted @ 2022-07-06 14:21  djzz  阅读(576)  评论(0)    收藏  举报