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

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

图1

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
html,body{
    height: 100%;
}
.wrap{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    position: relative;
}
.box{
    position: absolute;
    width: 200px;
    height: 200px;
    margin: 100px;
    background: #ccc;
}
</style>
</head>
<body>
<div class="wrap dasda">
    <div class="box asda"></div>
</div>
</body>
<script type="text/javascript">
document.querySelector('.wrap').onclick=function(e){
    console.log(e.target.classList);
}

document.querySelector('.box').onclick=function(e){
    e.cancelBubble = true;
    return false;
}
</script>
</html>

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

// 找到这个元素`class="el-dialog__wrapper"`，去掉点击事件，增加mousedown和mouseup事件：
<div class="el-dialog__wrapper" v-show="visible" @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();
  }
},

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

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

推荐阅读更多精彩内容