vue框架element-ui源码修改之关闭弹框的优化
2019-06-12 本文已影响0人
索哥来了
使用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文件夹就好。
最后完美解决！
