diff --git a/src/uploader/README.md b/src/uploader/README.md index f857c4fe6..3fcbb76ba 100644 --- a/src/uploader/README.md +++ b/src/uploader/README.md @@ -134,6 +134,7 @@ export default { |------|------|------| | oversize | Triggered when file size over limit | Same as after-read | | click-preview | Triggered when click preview image | Same as after-read | +| close-preview | Triggered when close full screen image preview | - | | delete | Triggered when delete preview file | file | ### Slots diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md index 58271772e..5f127485c 100644 --- a/src/uploader/README.zh-CN.md +++ b/src/uploader/README.zh-CN.md @@ -150,6 +150,7 @@ export default { |------|------|------| | oversize | 文件大小超过限制时触发 | 同`after-read` | | click-preview | 点击预览图时触发 | 同`after-read` | +| close-preview | 关闭全屏图片预览时触发 | - | | delete | 删除文件预览时触发 | file: 被删除的文件对象 | ### Slots diff --git a/src/uploader/index.js b/src/uploader/index.js index 02d0a7fb7..268529747 100644 --- a/src/uploader/index.js +++ b/src/uploader/index.js @@ -189,7 +189,10 @@ export default createComponent({ ImagePreview({ images: imageFiles, closeOnPopstate: true, - startPosition: imageFiles.indexOf(item.content || item.url) + startPosition: imageFiles.indexOf(item.content || item.url), + onClose: () => { + this.$emit('close-preview'); + } }); }, diff --git a/src/uploader/test/index.spec.js b/src/uploader/test/index.spec.js index 0ef7000d4..61a420db3 100644 --- a/src/uploader/test/index.spec.js +++ b/src/uploader/test/index.spec.js @@ -1,5 +1,5 @@ import Uploader from '..'; -import { mount, later } from '../../../test/utils'; +import { mount, later, triggerDrag } from '../../../test/utils'; window.File = function() { this.size = 10000; @@ -356,3 +356,20 @@ it('click-preview event', () => { expect(wrapper.emitted('click-preview')[0][0]).toEqual({ url: IMAGE }); expect(wrapper.emitted('click-preview')[0][1]).toEqual({ name: '' }); }); + +it('close-preview event', async () => { + const wrapper = mount(Uploader, { + propsData: { + fileList: [{ url: IMAGE }] + } + }); + + wrapper.find('.van-image').trigger('click'); + + const preview = document.querySelector('.van-image-preview'); + const swipe = preview.querySelector('.van-swipe__track'); + triggerDrag(swipe, 0, 0); + + await later(300); + expect(wrapper.emitted('close-preview')).toBeTruthy(); +});