diff --git a/src/uploader/README.md b/src/uploader/README.md index 62271d6d2..6681badd0 100644 --- a/src/uploader/README.md +++ b/src/uploader/README.md @@ -203,6 +203,7 @@ Use `disabled` prop to disable uploader. | preview-size | Size of preview image | _number \| string_ | `80px` | | preview-image `v2.1.5` | Whether to show image preview | _boolean_ | `true` | | preview-full-image | Whethe to show full screen image preview when click image | _boolean_ | `true` | +| preview-options `v2.9.3` | Options of full screen image preview,see [ImagePreview](#/en-US/image-preview) | _object_ | - | | multiple | Whether to enable multiple selection pictures | _boolean_ | `false` | | disabled | Whether to disabled the upload | _boolean_ | `false` | | deletable `v2.2.12` | Whether to show delete icon | _boolean_ | `true` | diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md index fa14d0286..45d33af9e 100644 --- a/src/uploader/README.zh-CN.md +++ b/src/uploader/README.zh-CN.md @@ -227,6 +227,7 @@ export default { | preview-size | 预览图和上传区域的尺寸,默认单位为`px` | _number \| string_ | `80px` | | preview-image | 是否在上传完成后展示预览图 | _boolean_ | `true` | | preview-full-image `v2.1.5` | 是否在点击预览图后展示全屏图片预览 | _boolean_ | `true` | +| preview-options `v2.9.3` | 全屏图片预览的配置项,可选值见 [ImagePreview](#/zh-CN/image-preview) | _object_ | - | | multiple | 是否开启图片多选,部分安卓机型不支持 | _boolean_ | `false` | | disabled | 是否禁用文件上传 | _boolean_ | `false` | | deletable `v2.2.12` | 是否展示删除按钮 | _boolean_ | `true` | diff --git a/src/uploader/index.js b/src/uploader/index.js index 1ede615a5..da26fbb6b 100644 --- a/src/uploader/index.js +++ b/src/uploader/index.js @@ -30,6 +30,7 @@ export default createComponent({ beforeRead: Function, beforeDelete: Function, previewSize: [Number, String], + previewOptions: Object, name: { type: [Number, String], default: '', @@ -256,11 +257,12 @@ export default createComponent({ this.imagePreview = ImagePreview({ images: imageContents, - closeOnPopstate: true, startPosition: imageFiles.indexOf(item), + closeOnPopstate: true, onClose: () => { this.$emit('close-preview'); }, + ...this.previewOptions, }); }, diff --git a/src/uploader/test/index.spec.js b/src/uploader/test/index.spec.js index 5aa5c894d..76ab58f30 100644 --- a/src/uploader/test/index.spec.js +++ b/src/uploader/test/index.spec.js @@ -406,6 +406,23 @@ test('click to preview image', async () => { expect(images.length).toEqual(1); }); +test('preview-options prop', async () => { + const wrapper = mount(Uploader, { + propsData: { + fileList: [{ url: IMAGE }], + previewOptions: { + closeable: true, + }, + }, + }); + + wrapper.find('.van-image').trigger('click'); + await later(); + + const closeIcon = document.querySelectorAll('.van-image-preview__close-icon'); + expect(closeIcon.length).toEqual(1); +}); + test('closeImagePreview method', () => { const close = jest.fn(); const wrapper = mount(Uploader, {