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

packages/dialog/src/component.vue

@@ -3,7 +3,7 @@
     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"
@@ -11,7 +11,8 @@
         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);