解决element UI中 select下拉框 el-select-dropdown el-popper超出el-dialog弹框的问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决element UI中 select下拉框 el-select-dropdown el-popper超出el-dialog弹框的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

【问题】：在elementUI 中，el-dialog的内容比较多，出现滚动条，且内容包含input输入框、select下拉框、时间选择器、cascader级联选择器等，在点开select下拉选择框后并向下滚动鼠标，会出现下拉框跑出el-dialog的区域的情况（有可能离el-dialog的区域很远），造成页面的展示效果混乱。

解决element UI中 select下拉框 el-select-dropdown el-popper超出el-dialog弹框的问题,vue.js,javascript,elementui

【解决方案】：我们可以在鼠标滚动的时候，让select弹框隐藏，这样就可以解决select 下拉框在el-dialog外面的问题了。

1. 创建util文件夹，下面创建scroll.js文件

 // 这是scroll.js文件的代码

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);
  }
}

2. 在自己封装的el-dialog的组件里引入scroll.js,再调用scrollHide方法

import { scrollHide } from "@/utils/scroll.js";

解决element UI中 select下拉框 el-select-dropdown el-popper超出el-dialog弹框的问题,vue.js,javascript,elementui 文章来源地址https://www.toymoban.com/news/detail-707720.html