MessageBox: add uid

examples/docs/en-US/message-box.md

@@ -274,7 +274,7 @@ The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.con
 | message | content of the MessageBox | string | — | — |
 | type | message type, used for icon display | string | success/info/warning/error | — |
 | customClass | custom class name for MessageBox | string | — | — |
-| callback | MessageBox closing callback if you don't prefer Promise | function(action), where action can be 'confirm' or 'cancel' | — | — |
+| callback | MessageBox closing callback if you don't prefer Promise | function(action), where action can be 'confirm' or 'cancel', and `instance` is the MessageBox instance. You can access to that instance's attributes and methods | — | — |
 | beforeClose | callback before MessageBox closes, and it will prevent MessageBox from closing | function(action, instance), where `action` can be 'confirm' or 'cancel', and `instance` is the MessageBox instance. You can access to that instance's attributes and methods | — | — |
 | lockScroll | whether to lock body scroll when MessageBox prompts | boolean | — | true |
 | showCancelButton | whether to show a cancel button | boolean | — | false (true when called with confirm and prompt) |

examples/docs/zh-CN/message-box.md

@@ -271,7 +271,7 @@ import { MessageBox } from 'element-ui';
 | message | MessageBox 消息正文内容 | string | — | — |
 | type | 消息类型，用于显示图标 | string | success/info/warning/error | — |
 | customClass | MessageBox 的自定义类名 | string | — | — |
-| callback | 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 | function(action)，action 的值为'confirm'或'cancel' | — | — |
+| callback | 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 | function(action, instance)，action 的值为'confirm'或'cancel', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法 | — | — |
 | beforeClose | MessageBox 关闭前的回调，会阻止实例的关闭 | function(action, instance)，action 的值为'confirm'或'cancel', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法 | — | — |
 | lockScroll | 是否在 MessageBox 出现时将 body 滚动锁定 | boolean | — | true |
 | showCancelButton | 是否显示取消按钮 | boolean | — | false（以 confirm 和 prompt 方式调用时为 true） |

packages/message-box/src/main.js

@@ -20,7 +20,8 @@ const defaults = {
   confirmButtonText: '',
   cancelButtonText: '',
   confirmButtonClass: '',
-  cancelButtonClass: ''
+  cancelButtonClass: '',
+  beforeClose: null
 };
 
 import Vue from 'vue';

packages/message-box/src/main.vue

@@ -92,6 +92,14 @@
     },
 
     methods: {
+      safeClose() {
+        const currentId = this.uid;
+        return () => {
+          this.$nextTick(() => {
+            if (currentId === this.uid) this.doClose();
+          });
+        };
+      },
       doClose() {
         if (!this.value) return;
         this.value = false;
@@ -120,7 +128,7 @@
       handleWrapperClick() {
         if (this.closeOnClickModal) {
           this.action = '';
-          this.close();
+          this.doClose();
         }
       },
 
@@ -130,9 +138,10 @@
         }
         this.action = action;
         if (typeof this.beforeClose === 'function') {
+          this.close = this.safeClose();
           this.beforeClose(action, this);
         } else {
-          this.close();
+          this.doClose();
         }
       },
 
@@ -172,6 +181,7 @@
       },
 
       value(val) {
+        if (val) this.uid++;
         if (this.$type === 'alert' || this.$type === 'confirm') {
           this.$nextTick(() => {
             this.$refs.confirm.$el.focus();
@@ -193,6 +203,7 @@
 
     data() {
       return {
+        uid: 1,
         title: undefined,
         message: '',
         type: '',

test/unit/specs/message-box.spec.js

@@ -169,9 +169,11 @@ describe('MessageBox', () => {
     });
     setTimeout(() => {
       document.querySelector('.el-message-box__wrapper .el-button--primary').click();
-      expect(msgAction).to.equal('confirm');
-      done();
-    }, 50);
+      setTimeout(() => {
+        expect(msgAction).to.equal('confirm');
+        done();
+      }, 10);
+    }, 10);
   });
 
   describe('promise', () => {