feat(Uploader): add preview-options prop (#6810)

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` |

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` |

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

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, {