[improvement] ImagePreview: add onClose params (#2197)

packages/image-preview/ImagePreview.vue

@@ -141,8 +141,14 @@ export default create({
 
       // prevent long tap to close component
       if (deltaTime < 300 && offsetX < 10 && offsetY < 10) {
-        this.$emit('input', false);
+        const index = this.active;
+
         this.resetScale();
+        this.$emit('input', false);
+        this.$emit('close', {
+          index,
+          url: this.images[index]
+        });
       }
     },
 

packages/image-preview/en-US.md

@@ -55,3 +55,10 @@ setTimeout(() => {
 | showIndicators | Whether to show indicators | `Boolean` | `false` |
 | loop | Whether to enable loop | `Boolean` | `true` |
 | onClose | Close callback | `Function` | - |
+
+### onClose Parematers
+
+| Attribute | Description | Type |
+|------|------|------|
+| url | Url of current image | `Number` |
+| index | Index of current image | `String` |

packages/image-preview/index.js

@@ -37,14 +37,14 @@ const ImagePreview = (images, startPosition = 0) => {
     ...options
   });
 
-  instance.$on('input', show => {
+  instance.$once('input', show => {
     instance.value = show;
-    if (!show) {
-      instance.$off('input');
-      options.onClose && options.onClose();
-    }
   });
 
+  if (options.onClose) {
+    instance.$once('close', options.onClose);
+  }
+
   return instance;
 };
 

packages/image-preview/test/index.spec.js

@@ -1,7 +1,12 @@
 import Vue from 'vue';
 import ImagePreview from '..';
 import ImagePreviewVue from '../ImagePreview';
-import { mount, trigger, triggerDrag, transitionStub } from '../../../test/utils';
+import {
+  mount,
+  trigger,
+  triggerDrag,
+  transitionStub
+} from '../../../test/utils';
 
 transitionStub();
 
@@ -63,6 +68,9 @@ test('function call options', done => {
     const swipe = wrapper.querySelector('.van-swipe__track');
     triggerDrag(swipe, 0, 0);
     expect(onClose.mock.calls.length).toEqual(1);
+    expect(onClose.mock.calls).toEqual([
+      [{ index: 0, url: 'https://img.yzcdn.cn/1.png' }]
+    ]);
     done();
   });
 });

packages/image-preview/zh-CN.md

@@ -63,3 +63,10 @@ setTimeout(() => {
 | showIndicators | 是否显示轮播指示器 | `Boolean` | `false` | 1.3.10 |
 | loop | 是否开启循环播放 | `Boolean` | `true` | 1.4.4 |
 | onClose | 关闭时的回调函数 | `Function` | - | 1.1.16 |
+
+### onClose 回调参数
+
+| 参数名 | 说明 | 类型 |
+|------|------|------|
+| url | 当前图片 URL | `String` |
+| index | 当前图片的索引值 | `Number` |

packages/uploader/en-US.md

@@ -61,8 +61,9 @@ You can set native properties such as `accpet`、`multiple` on Uploader, and the
 |------|------|
 | - | Custom icon |
 
-### afterRead parematers
-| Key | Description | Type |
+### afterRead Parematers
+
+| Attribute | Description | Type |
 |------|------|------|
 | file | file object | `Object` |
-| content | file content | `String` |
+| content | file content | `String` |

packages/uploader/zh-CN.md

@@ -60,7 +60,8 @@ export default {
 | - | 自定义 uploader 内容 |
 
 ### after-read 回调参数
-| key | 说明 | 类型 |
+
+| 参数名 | 说明 | 类型 |
 |------|------|------|
 | file | 文件解析后的 file 对象 | `Object` |
 | content | 文件内容 | `String` |