代码:
// 监测抽屉鼠标事件
handleWrapperMousedown(e) {
// 如果为true,则表示点击发生在遮罩层
this.classmodel= !!e.target.classList.contains('el-drawer__container')
},
handleWrapperMouseup(e) {
if((!!e.target.classList.contains('el-drawer__container')) && this.classmodel){
this.editdrawer=false;
}else{
this.editdrawer=true;
}
this.classmodel=false
},
在组件drawer上添加鼠标点击(mousedown)和释放(mouseup)事件,注意添加native事件修饰。
关闭抽屉条件:鼠标点击和释放均在遮罩层
实现原理:
1:鼠标点击时,获取点击事件的类列表,看看是否包含‘el-drawer__container’类,如果包含,则表示鼠标点击事件发生在遮罩层,记录到变量‘classmodel’,为true。反之为false
2:鼠标释放时,获取释放事件所在的位置是否处于遮罩层,方法同样为检测是否包含‘el-drawer__container’类。作为条件之一,与点击时记录的变量‘classmodel’做“与”运算,两者都为true时可关闭遮罩层,否则不关闭。鼠标释放后‘classmodel’设为默认值false
3:最后但十分重要:抽屉要设置成点击遮罩层不关闭,否则elementUI远程时间将覆盖你的mouse监听事件。
:wrapperClosable="false"
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。