alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(ImagePreview): enable swipe lazy-render (#5879)

Browse Source
This commit is contained in:
chenjiahan
2020-03-22 15:53:15 +08:00
parent 365f2b16f7
commit 7ac85868dc
4 changed files with 16 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/image-preview/ImagePreview.js
View File

@@ -319,6 +319,7 @@ export default createComponent({
return (
<Swipe
ref="swipe"
lazyRender
loop={this.loop}
class={bem('swipe')}
indicatorColor="white"

84
src/image-preview/test/__snapshots__/index.spec.js.snap
View File

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

24
src/image-preview/test/index.spec.js
View File

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

4
src/uploader/test/index.spec.js
View File

@@ -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'