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

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

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

   

      
编辑
      
...
      
...
    

//监测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远程事件将影响你的鼠标监听事件。