Dialog: Fix close bug (ElemeFE#15000) (ElemeFE#15544)

FEMessage · Jun 24, 2019 · 5626627 · 5626627
1 parent 0bb4121
commit 5626627
Showing 1 changed file with 16 additions and 3 deletions.
diff --git a/packages/dialog/src/component.vue b/packages/dialog/src/component.vue
@@ -3,15 +3,16 @@
     name="dialog-fade"
     @after-enter="afterEnter"
     @after-leave="afterLeave">
-    <div class="el-dialog__wrapper" v-show="visible" @click.self="handleWrapperClick">
+    <div class="el-dialog__wrapper" v-show="visible" @click.self="handleWrapperClick" @mouseup="handleMouseup">
       <div
         role="dialog"
         aria-modal="true"
         :aria-label="title || 'dialog'"
         class="el-dialog"
         :class="[{ 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]"
         ref="dialog"
-        :style="style">
+        :style="style"
+        @mousedown="handleMousedown">
         <div class="el-dialog__header">
           <slot name="title">
             <span class="el-dialog__title">{{ title }}</span>
@@ -39,6 +40,8 @@
   import Migrating from 'element-ui/src/mixins/migrating';
   import emitter from 'element-ui/src/mixins/emitter';
 
+  let dialogMouseDown = false;
+
   export default {
     name: 'ElDialog',
 
@@ -152,9 +155,19 @@
         };
       },
       handleWrapperClick() {
-        if (!this.closeOnClickModal) return;
+        if (!this.closeOnClickModal || dialogMouseDown) return;
         this.handleClose();
       },
+      handleMousedown() {
+        dialogMouseDown = true;
+      },
+      handleMouseup() {
+        if (dialogMouseDown) {
+          this.$nextTick(_ => {
+            dialogMouseDown = false;
+          });
+        }
+      },
       handleClose() {
         if (typeof this.beforeClose === 'function') {
           this.beforeClose(this.hide);