diff --git a/packages/image-preview/ImagePreview.vue b/packages/image-preview/ImagePreview.vue index 6c244b779..b18b65e87 100644 --- a/packages/image-preview/ImagePreview.vue +++ b/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] + }); } }, diff --git a/packages/image-preview/en-US.md b/packages/image-preview/en-US.md index eac403b20..d061063ee 100644 --- a/packages/image-preview/en-US.md +++ b/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` | diff --git a/packages/image-preview/index.js b/packages/image-preview/index.js index ecb972ace..4512f2c00 100644 --- a/packages/image-preview/index.js +++ b/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; }; diff --git a/packages/image-preview/test/index.spec.js b/packages/image-preview/test/index.spec.js index 85873e4a8..c0e4e6c00 100644 --- a/packages/image-preview/test/index.spec.js +++ b/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(); }); }); diff --git a/packages/image-preview/zh-CN.md b/packages/image-preview/zh-CN.md index 981217319..3afe29893 100644 --- a/packages/image-preview/zh-CN.md +++ b/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` | diff --git a/packages/uploader/en-US.md b/packages/uploader/en-US.md index 8660d8094..b758a006d 100644 --- a/packages/uploader/en-US.md +++ b/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` | \ No newline at end of file +| content | file content | `String` | diff --git a/packages/uploader/zh-CN.md b/packages/uploader/zh-CN.md index 024d3419e..fba40e88a 100644 --- a/packages/uploader/zh-CN.md +++ b/packages/uploader/zh-CN.md @@ -60,7 +60,8 @@ export default { | - | 自定义 uploader 内容 | ### after-read 回调参数 -| key | 说明 | 类型 | + +| 参数名 | 说明 | 类型 | |------|------|------| | file | 文件解析后的 file 对象 | `Object` | | content | 文件内容 | `String` |