代码://监听抽屉的鼠标事件点击发生在蒙版层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},在组件抽屉上添加鼠标点击(mousedown)和释放(mouseup)事件,注意添加native事件修饰。关闭抽屉的条件:鼠标点击和松开都在遮罩层实现。原理:1:鼠标点击时,获取点击事件的类列表,看是否包含'el-drawer__container'类。如果是,说明鼠标点击事件发生在Mask层,记录到变量'classmodel',为真。否则为false2:当鼠标释放时,获取释放事件所在位置是否在遮罩层中,方法也是检测是否包含'el-drawer__container'类。作为条件之一,对点击时记录的变量“classmodel”进行“与”运算。当两者都为真时,遮罩层可以关闭,否则不关闭。鼠标松开后,'classmodel'设置为默认值false3:最后但同样重要的是:抽屉要设置为点击遮罩层不关闭,否则elementUI远程事件会覆盖你的鼠标监听事件。:wrapperClosable="false"参考链接:https://www.jianshu.com/p/f39dcce1d5b3
