From 0b5cabbe24d89d0c4945ca597dee406d12bf50b1 Mon Sep 17 00:00:00 2001 From: neverland Date: Fri, 23 Aug 2019 14:28:57 +0800 Subject: [PATCH] feat(Uploader): add preview-full-image prop (#4205) --- src/uploader/README.md | 3 +- src/uploader/README.zh-CN.md | 1 + src/uploader/index.js | 8 +++ .../test/__snapshots__/index.spec.js.snap | 11 +---- src/uploader/test/index.spec.js | 49 ++++++++----------- 5 files changed, 33 insertions(+), 39 deletions(-) diff --git a/src/uploader/README.md b/src/uploader/README.md index d5944f012..349982d90 100644 --- a/src/uploader/README.md +++ b/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` | - | diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md index 4d8e5b001..8bc32797a 100644 --- a/src/uploader/README.zh-CN.md +++ b/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 | diff --git a/src/uploader/index.js b/src/uploader/index.js index 2a574973b..7530335b4 100644 --- a/src/uploader/index.js +++ b/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); diff --git a/src/uploader/test/__snapshots__/index.spec.js.snap b/src/uploader/test/__snapshots__/index.spec.js.snap index 3f3c22fbb..7e4592da9 100644 --- a/src/uploader/test/__snapshots__/index.spec.js.snap +++ b/src/uploader/test/__snapshots__/index.spec.js.snap @@ -22,21 +22,12 @@ exports[`click to preview image 1`] = ` style="transition: .3s all;" /> -
- -
- 1/2 + 1/1
`; diff --git a/src/uploader/test/index.spec.js b/src/uploader/test/index.spec.js index 86a6297ec..db5b66172 100644 --- a/src/uploader/test/index.spec.js +++ b/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(); });