From 00fe13d8008458eaa4dbd814ee0a70325635f97c Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Sat, 1 Dec 2018 09:35:34 +0800
Subject: [PATCH] [new feature] ImagePreview: add asyncClose prop (#2198)

---
 packages/image-preview/ImagePreview.vue   |  6 +++++-
 packages/image-preview/demo/index.vue     |  5 +++--
 packages/image-preview/en-US.md           | 14 +++++++++-----
 packages/image-preview/index.js           |  1 +
 packages/image-preview/test/index.spec.js | 16 ++++++++++++++++
 packages/image-preview/zh-CN.md           | 16 ++++++++++------
 6 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/packages/image-preview/ImagePreview.vue b/packages/image-preview/ImagePreview.vue
index b18b65e87..843c58e09 100644
--- a/packages/image-preview/ImagePreview.vue
+++ b/packages/image-preview/ImagePreview.vue
@@ -63,6 +63,7 @@ export default create({
 
   props: {
     images: Array,
+    asyncClose: Boolean,
     startPosition: Number,
     showIndicators: Boolean,
     loop: {
@@ -144,11 +145,14 @@ export default create({
         const index = this.active;
 
         this.resetScale();
-        this.$emit('input', false);
         this.$emit('close', {
           index,
           url: this.images[index]
         });
+
+        if (!this.asyncClose) {
+          this.$emit('input', false);
+        }
       }
     },
 
diff --git a/packages/image-preview/demo/index.vue b/packages/image-preview/demo/index.vue
index fe3f45c4a..c4e6d6d20 100644
--- a/packages/image-preview/demo/index.vue
+++ b/packages/image-preview/demo/index.vue
@@ -29,12 +29,12 @@ export default {
     'zh-CN': {
       button1: '预览图片',
       button2: '指定初始位置',
-      button3: '手动关闭'
+      button3: '异步关闭'
     },
     'en-US': {
       button1: 'Show Images',
       button2: 'Custom Start Position',
-      button3: 'Close Manually'
+      button3: 'Async Close'
     }
   },
 
@@ -42,6 +42,7 @@ export default {
     showImagePreview(position, timer) {
       const instance = ImagePreview({
         images,
+        asyncClose: !!timer,
         startPosition: typeof position === 'number' ? position : 0
       });
 
diff --git a/packages/image-preview/en-US.md b/packages/image-preview/en-US.md
index d061063ee..63474aa17 100644
--- a/packages/image-preview/en-US.md
+++ b/packages/image-preview/en-US.md
@@ -32,13 +32,16 @@ ImagePreview({
 });
 ```
 
-#### Close Manually
+#### Async Close
 
 ```javascript
-const instance = ImagePreview([
-  'https://img.yzcdn.cn/1.jpg',
-  'https://img.yzcdn.cn/2.jpg'
-]);
+const instance = ImagePreview({
+  images: [
+    'https://img.yzcdn.cn/1.jpg',
+    'https://img.yzcdn.cn/2.jpg'
+  ],
+  asyncClose: true
+});
 
 setTimeout(() => {
   instance.close();
@@ -55,6 +58,7 @@ setTimeout(() => {
 | showIndicators | Whether to show indicators | `Boolean` | `false` |
 | loop | Whether to enable loop | `Boolean` | `true` |
 | onClose | Close callback | `Function` | - |
+| asyncClose | Whether to enable async close | `Boolean` | `false` |
 
 ### onClose Parematers
 
diff --git a/packages/image-preview/index.js b/packages/image-preview/index.js
index 4512f2c00..f365600bd 100644
--- a/packages/image-preview/index.js
+++ b/packages/image-preview/index.js
@@ -9,6 +9,7 @@ const defaultConfig = {
   loop: true,
   value: true,
   showIndex: true,
+  asyncClose: false,
   startPosition: 0,
   showIndicators: false
 };
diff --git a/packages/image-preview/test/index.spec.js b/packages/image-preview/test/index.spec.js
index c0e4e6c00..c03c8873b 100644
--- a/packages/image-preview/test/index.spec.js
+++ b/packages/image-preview/test/index.spec.js
@@ -39,6 +39,22 @@ test('render image', () => {
   expect(wrapper.emitted('input')[0][0]).toBeFalsy();
 });
 
+test('async close', () => {
+  const wrapper = mount(ImagePreviewVue, {
+    propsData: {
+      images,
+      value: true,
+      asyncClose: true
+    }
+  });
+
+  const swipe = wrapper.find('.van-swipe__track');
+  triggerDrag(swipe, 0, 0);
+  expect(wrapper.emitted('input')).toBeFalsy();
+  wrapper.vm.close();
+  expect(wrapper.emitted('input')[0][0]).toBeFalsy();
+});
+
 test('function call', done => {
   ImagePreview(images);
   ImagePreview(images.slice(0, 1));
diff --git a/packages/image-preview/zh-CN.md b/packages/image-preview/zh-CN.md
index 3afe29893..0f642da93 100644
--- a/packages/image-preview/zh-CN.md
+++ b/packages/image-preview/zh-CN.md
@@ -38,15 +38,18 @@ ImagePreview({
 });
 ```
 
-#### 手动关闭
+#### 异步关闭
 
-通过实例上的 close 方法可以手动关闭图片预览
+通过`asyncClose`属性可以开启异步关闭，开启后异步关闭后，只能通过实例上的 close 方法关闭图片预览
 
 ```javascript
-const instance = ImagePreview([
-  'https://img.yzcdn.cn/1.jpg',
-  'https://img.yzcdn.cn/2.jpg'
-]);
+const instance = ImagePreview({
+  images: [
+    'https://img.yzcdn.cn/1.jpg',
+    'https://img.yzcdn.cn/2.jpg'
+  ],
+  asyncClose: true
+});
 
 setTimeout(() => {
   instance.close();
@@ -63,6 +66,7 @@ setTimeout(() => {
 | showIndicators | 是否显示轮播指示器 | `Boolean` | `false` | 1.3.10 |
 | loop | 是否开启循环播放 | `Boolean` | `true` | 1.4.4 |
 | onClose | 关闭时的回调函数 | `Function` | - | 1.1.16 |
+| asyncClose | 是否开启异步关闭 | `Boolean` | `false` | 1.4.8 |
 
 ### onClose 回调参数