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