From 145570ff889b692401146595880e280f216b8b4f Mon Sep 17 00:00:00 2001
From: netcon <netcon@live.com>
Date: Fri, 23 Apr 2021 15:33:46 +0800
Subject: [PATCH] feat: prevent close dialog/drawer when cursor dragging from
 body to mask

---
 packages/dialog/src/component.vue | 14 ++++++++++----
 packages/drawer/src/main.vue      | 11 ++++++++---
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/dialog/src/component.vue b/packages/dialog/src/component.vue
index 4450dfd1b..96223a164 100644
--- a/packages/dialog/src/component.vue
+++ b/packages/dialog/src/component.vue
@@ -6,6 +6,7 @@
     <div
       v-show="visible"
       class="el-dialog__wrapper"
+      @mousedown="clickStartElement = $event.target"
       @click.self="handleWrapperClick">
       <div
         role="dialog"
@@ -113,7 +114,8 @@
     data() {
       return {
         closed: false,
-        key: 0
+        key: 0,
+        clickStartElement: null
       };
     },
 
@@ -162,9 +164,13 @@
           }
         };
       },
-      handleWrapperClick() {
-        if (!this.closeOnClickModal) return;
-        this.handleClose();
+      handleWrapperClick(event) {
+        if (
+          this.closeOnClickModal &&
+          (!this.clickStartElement || this.clickStartElement.contains(event.target))
+        ) {
+          this.handleClose();
+        }
       },
       handleClose() {
         if (typeof this.beforeClose === 'function') {
diff --git a/packages/drawer/src/main.vue b/packages/drawer/src/main.vue
index 87874f2c7..45dc9515b 100644
--- a/packages/drawer/src/main.vue
+++ b/packages/drawer/src/main.vue
@@ -10,6 +10,7 @@
       <div
         class="el-drawer__container"
         :class="visible && 'el-drawer__open'"
+        @mousedown="clickStartElement = $event.target"
         @click.self="handleWrapperClick"
         role="document"
         tabindex="-1">
@@ -123,7 +124,8 @@ export default {
   data() {
     return {
       closed: false,
-      prevActiveElement: null
+      prevActiveElement: null,
+      clickStartElement: null
     };
   },
   watch: {
@@ -162,8 +164,11 @@ export default {
         this.closed = true;
       }
     },
-    handleWrapperClick() {
-      if (this.wrapperClosable) {
+    handleWrapperClick(event) {
+      if (
+        this.wrapperClosable &&
+        (!this.clickStartElement || this.clickStartElement.contains(event.target))
+      ) {
         this.closeDrawer();
       }
     },