Element-ui组件,复制Drawer 抽屉里面的内容,鼠标光标不小心移到遮罩层后,鼠标释放抽屉以及遮罩层被关闭的解决方法

2023-12-14 15:25:22

element-ui组件,Drawer 抽屉中复制里面的内容,或者鼠标光标全选里面的内容,鼠标光标不小心移到遮罩层后,鼠标释放抽屉以及遮罩层被关闭的解决方法

1.首先在el-drawer中定义两个监听的方法为mousedownDrawer、mouseupDrawer。.native为事件修饰符

<el-drawer
 class="operationsDrawer deep-input"
 :visible.sync="operationsDrawer"
 size="30%"
 :wrapperClosable="false"
 @mousedown.native="mousedownDrawer($event)"
 @mouseup.native="mouseupDrawer($event)">
   <div>
      <div>编辑</div>
      <div>...</div>
      <div>...</div>
    </div>
</el-drawer>
//监测Drawer鼠标事件
mousedownDrawer (e) {
    // 如果为true,则表示点击发生在遮罩层
    //判断事件的目标元素是否具有el-drawer__container类。如果具有该类,则classmodel变量的值将设置    为true;如果不具有该类,则classmodel变量的值将设置为false。  
   this.classmodel= !!e.target.classList.contains('el-drawer__container')
},
mouseupDrawer(e) {
  if((!!e.target.classList.contains('el-drawer__container')) && this.classmodel){
     // 点击发生在遮罩层且之前发生过 mousedown 事件,关闭抽屉 
    this.operationsDrawer=false;
   }else{
     // 点击发生在抽屉内容区域,保持抽屉打开
     this.operationsDrawer=true;
   }
   this.classmodel=false
},

1.mousedownDrawer方法中判断事件的目标元素是否具有el-drawer__container类。如果具有该类,则classmodel变量的值将设置 ? ?为true;如果不具有该类,则classmodel变量的值将设置为false。 ??

2.在mouseupDrawer方法中,我们首先检查点击事件是否发生在遮罩层上且之前发生过mousedown事件(通过classmodel的值进行判断)。如果是,则将operationsDrawer设置为false,关闭抽屉;否则,将operationsDrawer设置为true,保持抽屉打开。
最后,我们将classmodel设置为false,以便在下一次点击事件中重新判断是否发生在遮罩层上。

3.抽屉要设置成点击遮罩层不关闭,否则elementUI远程事件将影响你的鼠标监听事件。

文章来源:https://blog.csdn.net/weixin_48642777/article/details/132742282
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。