feat(Uploader): add preview-full-image prop (#4205)

src/uploader/README.md

@@ -113,8 +113,9 @@ export default {
 |------|------|------|------|
 | name | Input name | `string | number` | - |
 | accept | Accepted file type | `string` | `image/*` |
-| preview-image | Whether to show image preview | `boolean` | `true` |
 | preview-size | Size of preview image | `string | number` | `80px` |
+| preview-image | Whether to show image preview | `boolean` | `true` |
+| preview-full-image | Whethe to show full screen image preview when click image | `boolean` | `true` |
 | multiple | Whether to enable multiple selection pictures | `boolean` | `false` |
 | disabled | Whether to disabled the upload | `boolean` | `false` |
 | capture | Capture，can be set to `camera` | `string` | - |

src/uploader/README.zh-CN.md

@@ -131,6 +131,7 @@ export default {
 | accept | 接受的文件类型 | `string` | `image/*` | - |
 | preview-size | 预览图和上传区域的尺寸，默认单位为`px` | `string | number` | `80px` | 2.0.0 |
 | preview-image | 是否在上传完成后展示预览图 | `boolean` | `true` | 2.0.0 |
+| preview-full-image | 是否在点击预览图后展示全屏图片预览 | `boolean` | `true` | 2.1.5 |
 | multiple | 是否开启图片多选，部分安卓机型不支持 | `boolean` | `false` | 2.0.0 |
 | disabled | 是否禁用文件上传 | `boolean` | `false` | - |
 | capture | 图片选取模式，可选值为`camera`(直接调起摄像头) | `string` | - | 2.0.0 |

src/uploader/index.js

@@ -44,6 +44,10 @@ export default createComponent({
       type: Boolean,
       default: true
     },
+    previewFullImage: {
+      type: Boolean,
+      default: true
+    },
     imageFit: {
       type: String,
       default: 'cover'
@@ -174,6 +178,10 @@ export default createComponent({
     },
 
     onPreviewImage(item) {
+      if (!this.previewFullImage) {
+        return;
+      }
+
       const imageFiles = this.fileList
         .filter(item => isImageFile(item))
         .map(item => item.content || item.url);

src/uploader/test/__snapshots__/index.spec.js.snap

@@ -22,21 +22,12 @@ exports[`click to preview image 1`] = `
           style="transition: .3s all;"
         />
       </div>
-      <div
-        class="van-swipe-item"
-        style="width: 0px; height: 100%; transform: translateX(0px);"
-      >
-        <img
-          class="van-image-preview__image"
-          src="data:image/test"
-        />
-      </div>
     </div>
   </div>
   <div
     class="van-image-preview__index"
   >
-    1/2
+    1/1
   </div>
 </div>
 `;

src/uploader/test/index.spec.js

@@ -1,7 +1,7 @@
 import Uploader from '..';
 import { mount, later } from '../../../test/utils';
 
-window.File = function () {
+window.File = function() {
   this.size = 10000;
 };
 
@@ -12,8 +12,8 @@ const multiFile = { target: { files: [mockFile, mockFile] } };
 const IMAGE = 'https://img.yzcdn.cn/vant/cat.jpeg';
 const PDF = 'https://img.yzcdn.cn/vant/test.pdf';
 
-window.FileReader = function () {
-  this.readAsText = function () {
+window.FileReader = function() {
+  this.readAsText = function() {
     this.onload &&
       this.onload({
         target: {
@@ -101,9 +101,10 @@ it('before read return promise and resolve', async () => {
   const afterRead = jest.fn();
   const wrapper = mount(Uploader, {
     propsData: {
-      beforeRead: () => new Promise(resolve => {
-        resolve();
-      }),
+      beforeRead: () =>
+        new Promise(resolve => {
+          resolve();
+        }),
       afterRead
     }
   });
@@ -118,9 +119,10 @@ it('before read return promise and reject', async () => {
   const afterRead = jest.fn();
   const wrapper = mount(Uploader, {
     propsData: {
-      beforeRead: () => new Promise((resolve, reject) => {
-        reject();
-      }),
+      beforeRead: () =>
+        new Promise((resolve, reject) => {
+          reject();
+        }),
       afterRead
     }
   });
@@ -189,9 +191,7 @@ it('image-fit prop', () => {
   const wrapper = mount(Uploader, {
     propsData: {
       imageFit: 'contain',
-      fileList: [
-        { url: 'https://img.yzcdn.cn/vant/cat.jpeg' }
-      ]
+      fileList: [{ url: 'https://img.yzcdn.cn/vant/cat.jpeg' }]
     }
   });
 
@@ -325,28 +325,21 @@ it('before-delete prop rejected', async () => {
   expect(wrapper.emitted('delete')).toBeFalsy();
 });
 
-it('click to preview image', async () => {
+it('click to preview image', () => {
   const wrapper = mount(Uploader, {
     propsData: {
-      fileList: [
-        { url: IMAGE },
-        { url: PDF }
-      ],
-      previewSize: 30
-    },
-    listeners: {
-      input(fileList) {
-        wrapper.setProps({ fileList });
-      }
+      previewFullImage: false,
+      fileList: [{ url: IMAGE }, { url: PDF }]
     }
   });
 
-  wrapper.vm.onChange(file);
-  await later();
+  wrapper.find('.van-image').trigger('click');
+  const imagePreviewNode = document.querySelector('.van-image-preview');
+  expect(imagePreviewNode).toBeFalsy();
 
+  wrapper.setProps({ previewFullImage: true });
   wrapper.find('.van-image').trigger('click');
 
-  const imagePreviewNode = document.querySelector('.van-image-preview');
-  expect(imagePreviewNode).toMatchSnapshot();
-  imagePreviewNode.remove();
+  const imagePreviewNode2 = document.querySelector('.van-image-preview');
+  expect(imagePreviewNode2).toMatchSnapshot();
 });