add done parameter

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

@@ -65,18 +65,18 @@
           showCancelButton: true,
           confirmButtonText: 'OK',
           cancelButtonText: 'Cancel',
-          beforeClose: (action, instance) => {
+          beforeClose: (action, instance, done) => {
             if (action === 'confirm') {
               instance.confirmButtonLoading = true;
               instance.confirmButtonText = 'Loading...';
               setTimeout(() => {
-                instance.close();
+                done();
                 setTimeout(() => {
                   instance.confirmButtonLoading = false;
                 }, 300);
               }, 3000);
             } else {
-              instance.close();
+              done();
             }
           }
         }).then(action => {
@@ -208,7 +208,7 @@ Prompt is used when user input is required.
 
 Can be customized to show various content.
 
-:::demo The three methods mentioned above are repackagings of the `$msgbox` method. This example calls `$msgbox` method directly using the `showCancelButton` attribute, which is used to indicate if a cancel button is displayed. Besides we can use `cancelButtonClass` to add a custom style and `cancelButtonText` to customize the button text (the confirm button also has these fields, and a complete list of fields can be found at the end of this documentation). This example also uses the `beforeClose` attribute. It is a method and will be triggered when the MessageBox instance will be closed, and its execution will stop the instance from closing. It has two parameters: `action` and `instance`. Using it enables you to manipulate the instance before it closes, e.g. activating `loading` for confirm button; you can invoke the `close` method registered on the instance to close the MessageBox instance.
+:::demo The three methods mentioned above are repackagings of the `$msgbox` method. This example calls `$msgbox` method directly using the `showCancelButton` attribute, which is used to indicate if a cancel button is displayed. Besides we can use `cancelButtonClass` to add a custom style and `cancelButtonText` to customize the button text (the confirm button also has these fields, and a complete list of fields can be found at the end of this documentation). This example also uses the `beforeClose` attribute. It is a method and will be triggered when the MessageBox instance will be closed, and its execution will stop the instance from closing. It has three parameters: `action`, `instance` and `done`. Using it enables you to manipulate the instance before it closes, e.g. activating `loading` for confirm button; you can invoke the `done` method to close the MessageBox instance (if `done` is not called inside `beforeClose`, the instance will not be closed).
 
 ```html
 <template>
@@ -225,18 +225,18 @@ Can be customized to show various content.
           showCancelButton: true,
           confirmButtonText: 'OK',
           cancelButtonText: 'Cancel',
-          beforeClose: (action, instance) => {
+          beforeClose: (action, instance, done) => {
             if (action === 'confirm') {
               instance.confirmButtonLoading = true;
               instance.confirmButtonText = 'Loading...';
               setTimeout(() => {
-                instance.close();
+                done();
                 setTimeout(() => {
                   instance.confirmButtonLoading = false;
                 }, 300);
               }, 3000);
             } else {
-              instance.close();
+              done();
             }
           }
         }).then(action => {
@@ -275,7 +275,7 @@ The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.con
 | 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', 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 | — | — |
+| beforeClose | callback before MessageBox closes, and it will prevent MessageBox from closing | function(action, instance, done), where `action` can be 'confirm' or 'cancel'; `instance` is the MessageBox instance, and you can access to that instance's attributes and methods; `done` is for closing the instance | — | — |
 | 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) |
 | showConfirmButton | whether to show a confirm button | boolean | — | true |

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

@@ -66,18 +66,18 @@
           showCancelButton: true,
           confirmButtonText: '确定',
           cancelButtonText: '取消',
-          beforeClose: (action, instance) => {
+          beforeClose: (action, instance, done) => {
             if (action === 'confirm') {
               instance.confirmButtonLoading = true;
               instance.confirmButtonText = '执行中...';
               setTimeout(() => {
-                instance.close();
+                done();
                 setTimeout(() => {
                   instance.confirmButtonLoading = false;
                 }, 300);
               }, 3000);
             } else {
-              instance.close();
+              done();
             }
           }
         }).then(action => {
@@ -205,7 +205,7 @@
 
 可自定义配置不同内容。
 
-:::demo 以上三个方法都是对`$msgbox`方法的再包装。本例直接调用`$msgbox`方法，使用了`showCancelButton`字段，用于显示取消按钮。另外可使用`cancelButtonClass`为其添加自定义样式，使用`cancelButtonText`来自定义按钮文本（Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表）。此例还使用了`beforeClose`属性，它的值是一个方法，会在 MessageBox 的实例关闭前被调用，同时阻止实例的关闭。它有两个参数，分别为`action`和实例本身。使用它能够在关闭前对实例进行一些操作，比如为确定按钮添加`loading`状态等；此时若需要关闭实例，可以调用实例上的`close`方法。
+:::demo 以上三个方法都是对`$msgbox`方法的再包装。本例直接调用`$msgbox`方法，使用了`showCancelButton`字段，用于显示取消按钮。另外可使用`cancelButtonClass`为其添加自定义样式，使用`cancelButtonText`来自定义按钮文本（Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表）。此例还使用了`beforeClose`属性，它的值是一个方法，会在 MessageBox 的实例关闭前被调用，同时暂停实例的关闭。它有三个参数：`action`、实例本身和`done`方法。使用它能够在关闭前对实例进行一些操作，比如为确定按钮添加`loading`状态等；此时若需要关闭实例，可以调用`done`方法（若在`beforeClose`中没有调用`done`，则实例不会关闭）。
 
 ```html
 <template>
@@ -222,18 +222,18 @@
           showCancelButton: true,
           confirmButtonText: '确定',
           cancelButtonText: '取消',
-          beforeClose: (action, instance) => {
+          beforeClose: (action, instance, done) => {
             if (action === 'confirm') {
               instance.confirmButtonLoading = true;
               instance.confirmButtonText = '执行中...';
               setTimeout(() => {
-                instance.close();
+                done();
                 setTimeout(() => {
                   instance.confirmButtonLoading = false;
                 }, 300);
               }, 3000);
             } else {
-              instance.close();
+              done();
             }
           }
         }).then(action => {
@@ -272,7 +272,7 @@ import { MessageBox } from 'element-ui';
 | type | 消息类型，用于显示图标 | string | success/info/warning/error | — |
 | customClass | MessageBox 的自定义类名 | string | — | — |
 | callback | 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 | function(action, instance)，action 的值为'confirm'或'cancel', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法 | — | — |
-| beforeClose | MessageBox 关闭前的回调，会阻止实例的关闭 | function(action, instance)，action 的值为'confirm'或'cancel', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法 | — | — |
+| beforeClose | MessageBox 关闭前的回调，会暂停实例的关闭 | function(action, instance, done)，action 的值为'confirm'或'cancel'；instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例 | — | — |
 | lockScroll | 是否在 MessageBox 出现时将 body 滚动锁定 | boolean | — | true |
 | showCancelButton | 是否显示取消按钮 | boolean | — | false（以 confirm 和 prompt 方式调用时为 true） |
 | showConfirmButton | 是否显示确定按钮 | boolean | — | true |

packages/message-box/src/main.vue

@@ -92,7 +92,7 @@
     },
 
     methods: {
-      safeClose() {
+      getSafeClose() {
         const currentId = this.uid;
         return () => {
           this.$nextTick(() => {
@@ -138,8 +138,8 @@
         }
         this.action = action;
         if (typeof this.beforeClose === 'function') {
-          this.close = this.safeClose();
-          this.beforeClose(action, this);
+          this.close = this.getSafeClose();
+          this.beforeClose(action, this, this.close);
         } else {
           this.doClose();
         }