[Doc] Dialog: update demo (#1579)

example/pages/dialog/index.js

@@ -1,13 +1,11 @@
 import Page from '../../common/page';
 import Dialog from '../../dist/dialog/dialog';
 
-const message = '有赞是一家零售科技公司，致力于成为商家服务领域里最被信任的引领者';
+const message = '代码是写出来给人看的，附带能在机器上运行';
 
 Page({
   data: {
-    show: false,
+    show: false
-    username: '',
-    password: ''
   },
 
   showCustomDialog() {
@@ -38,17 +36,25 @@ Page({
     });
   },
 
-  onClose(event) {
+  onClickAsyncClose() {
-    if (event.detail === 'confirm') {
+    Dialog.confirm({
-      setTimeout(() => {
+      title: '标题',
-        this.setData({
+      message,
-          show: false
+      asyncClose: true
-        });
+    })
-      }, 1000);
+      .then(() => {
-    } else {
+        setTimeout(() => {
-      this.setData({
+          Dialog.close();
-        show: false
+        }, 1000);
+      })
+      .catch(() => {
+        Dialog.close();
       });
-    }
+  },
+
+  onClose(event) {
+    this.setData({
+      show: false
+    });
   }
 });

example/pages/dialog/index.wxml

@@ -1,28 +1,38 @@
-<demo-block title="消息提示" padding>
+<demo-block title="提示弹窗" padding>
   <van-button
     plain
     type="primary"
     class="demo-margin-right"
     bind:click="onClickAlert"
   >
-    消息提示
+    提示弹窗
   </van-button>
   <van-button
     plain
     type="primary"
     bind:click="onClickAlert2"
   >
-    无标题提示
+    提示弹窗（无标题）
   </van-button>
 </demo-block>
 
-<demo-block title="消息确认" padding>
+<demo-block title="确认弹窗" padding>
   <van-button
     plain
     type="primary"
     bind:click="onClickConfirm"
   >
-    消息确认
+    确认弹窗
+  </van-button>
+</demo-block>
+
+<demo-block title="异步关闭" padding>
+  <van-button
+    plain
+    type="primary"
+    bind:click="onClickAsyncClose"
+  >
+    异步关闭
   </van-button>
 </demo-block>
 
@@ -36,25 +46,15 @@
   </van-button>
   <van-dialog
     use-slot
-    async-close
     show="{{ show }}"
     show-cancel-button
-    transition="fade"
     bind:close="onClose"
     confirm-button-open-type="getUserInfo"
     bind:getuserinfo="getUserInfo"
   >
-    <van-field
+    <image
-      value="{{ username }}"
+      class="demo-image"
-      label="用户名"
+      src="https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg"
-      placeholder="请输入用户名"
-    />
-    <van-field
-      value="{{ password }}"
-      type="password"
-      label="密码"
-      border="{{ false }}"
-      placeholder="请输入密码"
     />
   </van-dialog>
 </demo-block>

example/pages/dialog/index.wxss

@@ -0,0 +1,5 @@
+.demo-image {
+  width: 100%;
+  padding: 25px 20px 0;
+  box-sizing: border-box;
+}

packages/dialog/README.md

@@ -64,56 +64,55 @@ Dialog.confirm({
 });
 ```
 
+#### 异步关闭
+
+设置`asyncClose`属性开启异步关闭，开启后可以手动调用`Dialog.close`方法关闭弹窗
+
+```javascript
+Dialog.confirm({
+  title: '标题',
+  message: '弹窗内容'
+  asyncClose: true
+})
+  .then(() => {
+    setTimeout(() => {
+      Dialog.close();
+    }, 1000);
+  })
+  .catch(() => {
+    Dialog.close();
+  });
+```
+
 #### 组件调用
 
-通过组件调用 Dialog 时，可以实现自定义弹窗内容、异步关闭、监听微信开放能力回调事件，具体可以参考下面的示例
+通过组件调用 Dialog 时，可以实现自定义弹窗内容、监听微信开放能力回调事件等功能，具体参考下例
 
 ```html
 <van-dialog
   use-slot
-  async-close
   show="{{ show }}"
   show-cancel-button
   confirm-button-open-type="getUserInfo"
   bind:close="onClose"
   bind:getuserinfo="getUserInfo"
 >
-<van-field
+  <image src="https://img.yzcdn.cn/1.jpg" />
-  value="{{ username }}"
-  label="用户名"
-  placeholder="请输入用户名"
-/>
-<van-field
-  value="{{ password }}"
-  type="password"
-  label="密码"
-  :border="false"
-  placeholder="请输入密码"
-/>
 </van-dialog>
 ```
 
 ```js
 Page({
   data: {
-    show: true,
+    show: true
-    username: '',
-    password: ''
   },
 
-  onClose(event) {
+  getUserInfo(event) {
-    if (event.detail === 'confirm') {
+    console.log(event.detail);
-      // 异步关闭弹窗
+  },
-      setTimeout(() => {
+
-        this.setData({
+  onClose() {
-          show: false
+    this.setData({ close: false });
-        });
-      }, 1000);
-    } else {
-      this.setData({
-        show: false
-      });
-    }
   }
 });
 ```

packages/dialog/index.ts

@@ -100,7 +100,7 @@ VantComponent({
       }
       this.$emit('close', action);
 
-      //把 dialog 实例传递出去，可以通过 stopLoading() 在外部关闭按钮的 loading
+      // 把 dialog 实例传递出去，可以通过 stopLoading() 在外部关闭按钮的 loading
       this.$emit(action, { dialog: this });
 
       const callback = this.data[action === 'confirm' ? 'onConfirm' : 'onCancel'];