3

代码:

// 监测抽屉鼠标事件
    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
    },

image.png

在组件drawer上添加鼠标点击(mousedown)和释放(mouseup)事件,注意添加native事件修饰。

关闭抽屉条件:鼠标点击和释放均在遮罩层

实现原理:
1:鼠标点击时,获取点击事件的类列表,看看是否包含‘el-drawer__container’类,如果包含,则表示鼠标点击事件发生在遮罩层,记录到变量‘classmodel’,为true。反之为false
2:鼠标释放时,获取释放事件所在的位置是否处于遮罩层,方法同样为检测是否包含‘el-drawer__container’类。作为条件之一,与点击时记录的变量‘classmodel’做“与”运算,两者都为true时可关闭遮罩层,否则不关闭。鼠标释放后‘classmodel’设为默认值false
3:最后但十分重要:抽屉要设置成点击遮罩层不关闭,否则elementUI远程时间将覆盖你的mouse监听事件。

:wrapperClosable="false"

参考链接:
https://www.jianshu.com/p/f39dcce1d5b3


charlotteeeeeee
74 声望7 粉丝