vue框架element-ui源码修改之关闭弹框的优化

使用element-ui里面的dialog弹框的时候，会有这样一个问题：
鼠标点在弹框上没有放开，然后又移出到外面的遮罩上，这个时候还是触发了遮罩的点击事件（ps:如果点遮罩会关闭的话，这个时候就会关闭）。
如果用户希望点遮罩关闭，上面这种情况不关闭。（ps:上面这种情况的具体案例：选择复制弹框里面的东西的时候，容易不小心移到外面去），效果如下：

图1

（ps:其实这是js的点击事件的机制问题）
下面这个demo可以直接运行看，点击里面移到外面去就会出现相同问题：

优化思路：不使用点击事件，改用mousedown和mouseup事件。在mousedown的时候记录一下触发区域是不是在遮罩上面，然后在mouseup的时候再判断一下，如果两个触发区域都是在遮罩上面就可以执行关闭函数。
下面再来说说，修改源码的步骤：
在github官网把源码down下来：https://github.com/ElemeFE/element.git
然后执行npm install下载相关依赖
然后打开这个文件夹packages\dialog\src里面的vue文件，修改三处位置:

// 找到这个元素`class="el-dialog__wrapper"`，去掉点击事件，增加mousedown和mouseup事件：


...

//增加对应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();
  }
},

改完后，执行命令npm run dist
把生成的lib文件夹，覆盖项目里面的node_modules\element-ui下的lib文件夹就好。
最后完美解决！