From f87dd825d76252478f3c4bc87f6d3c1a4be4822e Mon Sep 17 00:00:00 2001
From: qianzhaoyan <779547508@qq.com>
Date: Tue, 17 Apr 2018 10:36:20 +0800
Subject: [PATCH] [improvement] Dialog: support async close (#854)

---
 docs/demos/views/dialog.vue   | 12 ++++++++++--
 docs/markdown/en-US/dialog.md | 11 ++++++++---
 docs/markdown/zh-CN/dialog.md | 11 ++++++++---
 packages/dialog/dialog.vue    | 27 +++++++++++++++++++++++++--
 4 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/docs/demos/views/dialog.vue b/docs/demos/views/dialog.vue
index 7fab3808b..052dad95b 100644
--- a/docs/demos/views/dialog.vue
+++ b/docs/demos/views/dialog.vue
@@ -13,7 +13,7 @@
       <van-button @click="show = true">{{ $t('advancedUsage') }}</van-button>
       <van-dialog
         v-model="show"
-        @confirm="show = false"
+        :asyncConfirm="onClickConfirmAsync"
       >
         <van-field
           v-model="username"
@@ -59,7 +59,7 @@ export default {
       Dialog.alert({
         title: this.$t('title'),
         message: this.$t('content')
-      });
+      })
     },
 
     onClickAlert2() {
@@ -73,6 +73,14 @@ export default {
         title: this.$t('title'),
         message: this.$t('content')
       });
+    },
+
+    onClickConfirmAsync() {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve()
+        }, 1000)
+      })
     }
   }
 };
diff --git a/docs/markdown/en-US/dialog.md b/docs/markdown/en-US/dialog.md
index 62c1f35e1..66544b325 100644
--- a/docs/markdown/en-US/dialog.md
+++ b/docs/markdown/en-US/dialog.md
@@ -82,7 +82,7 @@ export default {
 If you need to render vue components within a dialog, you can use dialog component.
 
 ```html
-<van-dialog v-model="show" @confirm="onConfirm">
+<van-dialog v-model="show" :asyncConfirm="onClickConfirmAsync">
   <van-field
     v-model="username"
     label="Username"
@@ -110,8 +110,12 @@ export default {
   },
   
   methods: {
-    onConfirm() {
-      this.show = false;
+    onClickConfirmAsync() {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve()
+        }, 1000)
+      })
     }
   }
 }
@@ -124,6 +128,7 @@ export default {
 | v-model | Whether to show dialog | `Boolean` | - | - |
 | title | Title | `String` | - | - |
 | message | Message | `String` | - | - |
+| async-confirm | Whether to close async，The incoming function is triggered when you click confirm. | `Function` | - | - |
 | show-confirm-button | Whether to show confirm button | `Boolean` |  `true` | - |
 | show-cancel-button | Whether to show cancel button | `Boolean` |  `false` | - |
 | confirm-button-text | Confirm button text | `String` |  `Confirm` | - |
diff --git a/docs/markdown/zh-CN/dialog.md b/docs/markdown/zh-CN/dialog.md
index c48bb5352..06b366a1b 100644
--- a/docs/markdown/zh-CN/dialog.md
+++ b/docs/markdown/zh-CN/dialog.md
@@ -84,7 +84,7 @@ export default {
 如果需要在弹窗内实现更复杂的交互，可以通过组件形式来调用 Dialog
 
 ```html
-<van-dialog v-model="show" @confirm="onConfirm">
+<van-dialog v-model="show" :asyncConfirm="onClickConfirmAsync">
   <van-field
     v-model="username"
     label="用户名"
@@ -112,8 +112,12 @@ export default {
   },
   
   methods: {
-    onConfirm() {
-      this.show = false;
+    onClickConfirmAsync() {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve();
+        }, 1000)
+      });
     }
   }
 }
@@ -126,6 +130,7 @@ export default {
 | v-model | 是否显示弹窗 | `Boolean` | - | - |
 | title | 标题 | `String` | - | - |
 | message | 内容 | `String` | - | - |
+| async-confirm | dialog是否异步关闭，传入一个返回Promise的函数，在点击确定时触发。 | `Function` | - | - |
 | show-confirm-button | 是否展示确认按钮 | `Boolean` |  `true` | - |
 | show-cancel-button | 是否展示取消按钮 | `Boolean` |  `false` | - |
 | confirm-button-text | 确认按钮的文案 | `String` |  `确认` | - |
diff --git a/packages/dialog/dialog.vue b/packages/dialog/dialog.vue
index fe4496a94..c7bd80062 100644
--- a/packages/dialog/dialog.vue
+++ b/packages/dialog/dialog.vue
@@ -19,6 +19,7 @@
         <van-button
           size="large"
           class="van-dialog__confirm"
+          :loading="confirmButtonLoading"
           :class="{ 'van-hairline--left': showCancelButton && showConfirmButton }"
           v-show="showConfirmButton"
           @click="handleAction('confirm')"
@@ -38,6 +39,18 @@ import Popup from '../mixins/popup';
 export default create({
   name: 'dialog',
 
+  data() {
+    return {
+      confirmButtonLoading: false
+    };
+  },
+
+  watch: {
+    value(val) {
+      this.confirmButtonLoading = !val && false;
+    }
+  },
+
   components: {
     VanButton
   },
@@ -48,6 +61,7 @@ export default create({
     title: String,
     message: String,
     callback: Function,
+    asyncConfirm: Function,
     confirmButtonText: String,
     cancelButtonText: String,
     showCancelButton: Boolean,
@@ -67,8 +81,17 @@ export default create({
 
   methods: {
     handleAction(action) {
-      this.$emit('input', false);
-      this.$emit(action);
+      if ((action === 'confirm') && this.asyncConfirm) {
+        this.confirmButtonLoading = true;
+        this.asyncConfirm(action).then(res => {
+          this.$emit('input', false);
+        }).catch(err => {
+          this.confirmButtonLoading = false;
+        });
+      } else {
+        this.$emit('input', false);
+        this.$emit(action);
+      }
       this.callback && this.callback(action);
     }
   }