[new feature] ImagePreview: add asyncClose prop (#2198)

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);
+        }
       }
     },
 

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
       });
 

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
 

packages/image-preview/index.js

@@ -9,6 +9,7 @@ const defaultConfig = {
   loop: true,
   value: true,
   showIndex: true,
+  asyncClose: false,
   startPosition: 0,
   showIndicators: false
 };

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));

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 回调参数