diff --git a/src/image-preview/ImagePreview.js b/src/image-preview/ImagePreview.js
index fd93a4a3d..0494beb0d 100644
--- a/src/image-preview/ImagePreview.js
+++ b/src/image-preview/ImagePreview.js
@@ -319,6 +319,7 @@ export default createComponent({
return (
<Swipe
ref="swipe"
+ lazyRender
loop={this.loop}
class={bem('swipe')}
indicatorColor="white"
diff --git a/src/image-preview/test/__snapshots__/index.spec.js.snap b/src/image-preview/test/__snapshots__/index.spec.js.snap
index c3326cf37..b4c5692e2 100644
--- a/src/image-preview/test/__snapshots__/index.spec.js.snap
+++ b/src/image-preview/test/__snapshots__/index.spec.js.snap
@@ -39,62 +39,13 @@ exports[`index slot 1`] = `
</div>
`;
-exports[`lazy-load prop 1`] = `
-<div class="van-image-preview" name="van-fade">
- <div class="van-swipe van-image-preview__swipe">
- <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);">
- <div class="van-swipe-item" style="width: 0px;">
- <div class="van-image van-image-preview__image" style="transition-duration: .3s;"><img class="van-image__img" style="object-fit: contain;">
- <div class="van-image__loading">
- <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
- </div>
- </div>
- </div>
- <div class="van-swipe-item" style="width: 0px;">
- <div class="van-image van-image-preview__image"><img class="van-image__img" style="object-fit: contain;">
- <div class="van-image__loading">
- <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
- </div>
- </div>
- </div>
- <div class="van-swipe-item" style="width: 0px;">
- <div class="van-image van-image-preview__image"><img class="van-image__img" style="object-fit: contain;">
- <div class="van-image__loading">
- <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="van-image-preview__index">1 / 3</div>
-</div>
-`;
-
exports[`render image 1`] = `
<div class="van-image-preview" name="van-fade">
<div class="van-swipe van-image-preview__swipe">
<div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);">
- <div class="van-swipe-item" style="width: 0px;">
- <div class="van-image van-image-preview__image" style="transition-duration: .3s;"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
- <div class="van-image__loading">
- <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
- </div>
- </div>
- </div>
- <div class="van-swipe-item" style="width: 0px;">
- <div class="van-image van-image-preview__image"><img src="https://img.yzcdn.cn/2.png" class="van-image__img" style="object-fit: contain;">
- <div class="van-image__loading">
- <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
- </div>
- </div>
- </div>
- <div class="van-swipe-item" style="width: 0px;">
- <div class="van-image van-image-preview__image"><img src="https://img.yzcdn.cn/3.png" class="van-image__img" style="object-fit: contain;">
- <div class="van-image__loading">
- <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
- </div>
- </div>
- </div>
+ <div class="van-swipe-item" style="width: 0px;"></div>
+ <div class="van-swipe-item" style="width: 0px;"></div>
+ <div class="van-swipe-item" style="width: 0px;"></div>
</div>
</div>
<div class="van-image-preview__index">1 / 3</div>
@@ -110,32 +61,9 @@ exports[`set show-index prop to false 1`] = `
`;
exports[`zoom 1`] = `
-<div class="van-image-preview" name="van-fade">
- <div class="van-swipe van-image-preview__swipe">
- <div class="van-swipe__track" style="width: 300px; transition-duration: 0ms; transform: translateX(0px);">
- <div class="van-swipe-item" style="width: 100px;">
- <div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale3d(2, 2, 1) translate(0px, NaNpx);"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
- <div class="van-image__loading">
- <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
- </div>
- </div>
- </div>
- <div class="van-swipe-item" style="width: 100px;">
- <div class="van-image van-image-preview__image"><img src="https://img.yzcdn.cn/2.png" class="van-image__img" style="object-fit: contain;">
- <div class="van-image__loading">
- <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
- </div>
- </div>
- </div>
- <div class="van-swipe-item" style="width: 100px;">
- <div class="van-image van-image-preview__image"><img src="https://img.yzcdn.cn/3.png" class="van-image__img" style="object-fit: contain;">
- <div class="van-image__loading">
- <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
- </div>
- </div>
- </div>
- </div>
+<div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale3d(2, 2, 1) translate(0px, NaNpx);"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
+ <div class="van-image__loading">
+ <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
</div>
- <div class="van-image-preview__index">1 / 3</div>
</div>
`;
diff --git a/src/image-preview/test/index.spec.js b/src/image-preview/test/index.spec.js
index 2b7c5834d..e572ad3b7 100644
--- a/src/image-preview/test/index.spec.js
+++ b/src/image-preview/test/index.spec.js
@@ -177,7 +177,8 @@ test('onScale option', async done => {
},
});
- const image = instance.$el.getElementsByTagName('img')[0];
+ await later();
+ const image = instance.$el.querySelector('img');
triggerZoom(image, 300, 300);
Element.prototype.getBoundingClientRect = getBoundingClientRect;
});
@@ -195,10 +196,12 @@ test('zoom', async () => {
propsData: { images, value: true },
});
- const image = wrapper.find('img');
+ await later();
+ const image = wrapper.find('.van-image');
triggerZoom(image, 300, 300);
triggerDrag(image, 300, 300);
- expect(wrapper).toMatchSnapshot();
+
+ expect(image).toMatchSnapshot();
Element.prototype.getBoundingClientRect = getBoundingClientRect;
});
@@ -257,18 +260,3 @@ test('closeOnPopstate', () => {
trigger(window, 'popstate');
expect(wrapper.emitted('input')[1]).toBeFalsy();
});
-
-test('lazy-load prop', () => {
- const wrapper = mount(ImagePreviewVue, {
- propsData: {
- images,
- lazyLoad: true,
- },
- });
-
- wrapper.setProps({
- value: true,
- });
-
- expect(wrapper).toMatchSnapshot();
-});
diff --git a/src/uploader/test/index.spec.js b/src/uploader/test/index.spec.js
index ca79464ac..8c39304be 100644
--- a/src/uploader/test/index.spec.js
+++ b/src/uploader/test/index.spec.js
@@ -382,7 +382,7 @@ test('before-delete prop rejected', async () => {
expect(wrapper.emitted('delete')).toBeFalsy();
});
-test('click to preview image', () => {
+test('click to preview image', async () => {
const wrapper = mount(Uploader, {
propsData: {
previewFullImage: false,
@@ -397,6 +397,8 @@ test('click to preview image', () => {
wrapper.setProps({ previewFullImage: true });
wrapper.find('.van-image').trigger('click');
+ await later();
+
const imagePreviewNode2 = document.querySelector('.van-image-preview');
const images = imagePreviewNode2.querySelectorAll(
'.van-image-preview__image'