From 4116bc731a49429eb46f1467ff4773c4d781a3ff Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 18 Aug 2020 21:23:07 +0800
Subject: [PATCH] docs(ImagePreview): update demo (#7016)

---
 src/image-preview/README.md       | 24 ++++++--
 src/image-preview/README.zh-CN.md | 28 +++++++---
 src/image-preview/demo/index.vue  | 91 +++++++++++++++----------------
 3 files changed, 82 insertions(+), 61 deletions(-)

diff --git a/src/image-preview/README.md b/src/image-preview/README.md
index e46997566..111ff5679 100644
--- a/src/image-preview/README.md
+++ b/src/image-preview/README.md
@@ -20,7 +20,7 @@ ImagePreview([
 ]);
 ```
 
-### Custom config
+### Set Start Position
 
 ```js
 ImagePreview({
@@ -29,9 +29,6 @@ ImagePreview({
     'https://img.yzcdn.cn/vant/apple-2.jpg',
   ],
   startPosition: 1,
-  onClose() {
-    // do something
-  },
 });
 ```
 
@@ -49,6 +46,22 @@ ImagePreview({
 });
 ```
 
+### Close Event
+
+```js
+import { Toast } from 'vant';
+
+ImagePreview({
+  images: [
+    'https://img.yzcdn.cn/vant/apple-1.jpg',
+    'https://img.yzcdn.cn/vant/apple-2.jpg',
+  ],
+  onClose() {
+    Toast('closed');
+  },
+});
+```
+
 ### Async Close
 
 ```js
@@ -62,7 +75,7 @@ const instance = ImagePreview({
 
 setTimeout(() => {
   instance.close();
-}, 1000);
+}, 2000);
 ```
 
 ### Component Call
@@ -85,7 +98,6 @@ export default {
       ],
     };
   },
-
   methods: {
     onChange(index) {
       this.index = index;
diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md
index defe34bc8..59f177887 100644
--- a/src/image-preview/README.zh-CN.md
+++ b/src/image-preview/README.zh-CN.md
@@ -46,9 +46,9 @@ ImagePreview([
 ]);
 ```
 
-### 传入配置项
+### 指定初始位置
 
-通过传入配置对象，可以指定初始图片的位置、监听关闭事件。
+ImagePreview 支持传入配置对象，并通过 `startPosition` 选项指定图片的初始位置（索引值）。
 
 ```js
 ImagePreview({
@@ -57,9 +57,6 @@ ImagePreview({
     'https://img.yzcdn.cn/vant/apple-2.jpg',
   ],
   startPosition: 1,
-  onClose() {
-    // do something
-  },
 });
 ```
 
@@ -77,6 +74,24 @@ ImagePreview({
 });
 ```
 
+### 监听关闭事件
+
+通过 `onClose` 选项监听图片预览的关闭事件。
+
+```js
+import { Toast } from 'vant';
+
+ImagePreview({
+  images: [
+    'https://img.yzcdn.cn/vant/apple-1.jpg',
+    'https://img.yzcdn.cn/vant/apple-2.jpg',
+  ],
+  onClose() {
+    Toast('关闭');
+  },
+});
+```
+
 ### 异步关闭
 
 通过`asyncClose`属性可以开启异步关闭，开启后异步关闭后，只能通过实例上的 close 方法关闭图片预览。
@@ -92,7 +107,7 @@ const instance = ImagePreview({
 
 setTimeout(() => {
   instance.close();
-}, 1000);
+}, 2000);
 ```
 
 ### 组件调用
@@ -117,7 +132,6 @@ export default {
       ],
     };
   },
-
   methods: {
     onChange(index) {
       this.index = index;
diff --git a/src/image-preview/demo/index.vue b/src/image-preview/demo/index.vue
index 79a3f1742..531fb8b65 100644
--- a/src/image-preview/demo/index.vue
+++ b/src/image-preview/demo/index.vue
@@ -1,33 +1,33 @@
 <template>
   <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-button type="primary" @click="showImagePreview">
-        {{ t('button1') }}
-      </van-button>
+    <demo-block card :title="t('basicUsage')">
+      <van-cell is-link @click="showImagePreview">
+        {{ t('showImages') }}
+      </van-cell>
     </demo-block>
 
-    <demo-block :title="t('button2')">
-      <van-button type="primary" @click="showImagePreview(1)">
-        {{ t('button2') }}
-      </van-button>
+    <demo-block card :title="t('customConfig')">
+      <van-cell is-link @click="showImagePreview({ startPosition: 1 })">
+        {{ t('startPosition') }}
+      </van-cell>
+      <van-cell is-link @click="showImagePreview({ closeable: true })">
+        {{ t('showClose') }}
+      </van-cell>
+      <van-cell is-link @click="showImagePreview({ onClose })">
+        {{ t('closeEvent') }}
+      </van-cell>
     </demo-block>
 
-    <demo-block :title="t('button4')">
-      <van-button type="primary" @click="showImagePreview(0, 0, true)">
-        {{ t('button4') }}
-      </van-button>
+    <demo-block card :title="t('asyncClose')">
+      <van-cell is-link @click="showImagePreview({ asyncClose: true })">
+        {{ t('asyncClose') }}
+      </van-cell>
     </demo-block>
 
-    <demo-block :title="t('button3')">
-      <van-button type="primary" @click="showImagePreview(0, 3000)">
-        {{ t('button3') }}
-      </van-button>
-    </demo-block>
-
-    <demo-block :title="t('componentCall')">
-      <van-button type="primary" @click="componentCall">
+    <demo-block card :title="t('componentCall')">
+      <van-cell is-link @click="componentCall">
         {{ t('componentCall') }}
-      </van-button>
+      </van-cell>
       <van-image-preview v-model="show" :images="images" @change="onChange">
         <template #index>{{ t('index', index) }}</template>
       </van-image-preview>
@@ -48,18 +48,24 @@ const images = [
 export default {
   i18n: {
     'zh-CN': {
-      button1: '预览图片',
-      button2: '指定初始位置',
-      button3: '异步关闭',
-      button4: '展示关闭按钮',
+      closed: '关闭',
+      showClose: '展示关闭按钮',
+      showImages: '预览图片',
+      asyncClose: '异步关闭',
+      closeEvent: '监听关闭事件',
+      customConfig: '传入配置项',
+      startPosition: '指定初始位置',
       componentCall: '组件调用',
       index: (index) => `第${index + 1}页`,
     },
     'en-US': {
-      button1: 'Show Images',
-      button2: 'Custom Start Position',
-      button3: 'Async Close',
-      button4: 'Show Close Icon',
+      closed: 'closed',
+      showClose: 'Show Close Icon',
+      showImages: 'Show Images',
+      asyncClose: 'Async Close',
+      closeEvent: 'Close Event',
+      customConfig: 'Custom Config',
+      startPosition: 'Set Start Position',
       componentCall: 'Component Call',
       index: (index) => `Page: ${index}`,
     },
@@ -74,6 +80,10 @@ export default {
   },
 
   methods: {
+    onClose() {
+      this.$toast(this.t('closed'));
+    },
+
     componentCall() {
       this.show = true;
     },
@@ -82,33 +92,18 @@ export default {
       this.index = index;
     },
 
-    showImagePreview(position, timer, closeable) {
+    showImagePreview(options) {
       const instance = ImagePreview({
         images,
-        swipeDuration: 300,
-        asyncClose: !!timer,
-        closeable,
-        startPosition: typeof position === 'number' ? position : 0,
+        ...options,
       });
 
-      if (timer) {
+      if (options.asyncClose) {
         setTimeout(() => {
           instance.close();
-        }, timer);
+        }, 2000);
       }
     },
   },
 };
 </script>
-
-<style lang="less">
-@import '../../style/var';
-
-.demo-image-preview {
-  background-color: @white;
-
-  .van-button {
-    margin-left: @padding-md;
-  }
-}
-</style>