[vue][element-ui]mousedown在Dialog上 mouseup在遮罩上时自动关闭弹窗的问题总结

感谢文章作者

https://www.jianshu.com/p/f39dcce1d5b3

问题描述

在使用element-ui在chrome版本为73+时，mousedown在Dialog上 mouseup在遮罩上时弹窗自动关闭。但是用户希望弹窗不关闭，比如，在弹窗中复制文本很容易不小心拖出弹窗外。

原因

js的点击事件机制在chrome73+时，表现问题（打个问号？？待深入）

优化

不使用click事件，改用mousedown和mouseup事件。在mousedown的时候记录一下触发区域是不是在遮罩层上，然后再在mouseup的时候再判断一下，如果两个出发区域都是在遮罩层上面，再执行关闭函数，否则，不关闭。

修改源码方法

1.下载element源码

下载地址：https://github.com/ElemeFE/element.git

2.执行npm install下载相关依赖

这个过程可能会出现一些nodejs报错，部分解决方案查看：

https://www.cnblogs.com/danker/p/12409165.html

https://www.cnblogs.com/danker/p/12409116.html

3.打开文件夹element-dev/packages/dialog/src里的vue文件并修改

// 找到这个元素`class="el-dialog__wrapper"`，去掉点击事件，增加mousedown和mouseup事件：
<div v-show="visible" class="el-dialog__wrapper" @mousedown="handleWrapperMousedown($event)" @mouseup="handleWrapperMouseup($event)">

...

//增加对应mousedownClassBol
data() {
  return {
    mousedownClassBol: false
  };
},

...

//增加对应事件
handleWrapperMousedown(e) {
  this.mousedownClassBol = !!e.target.classList.contains('el-dialog__wrapper');
},
handleWrapperMouseup(e) {
  if (!!e.target.classList.contains('el-dialog__wrapper') && this.mousedownClassBol) {
    this.mousedownClassBol = false;
    this.handleWrapperClick();
  }
},

4.执行命令 npm run dist

5.将生成的lib文件夹覆盖项目中的node_modules/element-ui下的lib文件夹，重新编译启动项目即可解决。