blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues 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
Show Stats 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 ( return (
<Swipe <Swipe
ref="swipe" ref="swipe"
lazyRender
loop={this.loop} loop={this.loop}
class={bem('swipe')} class={bem('swipe')}
indicatorColor="white" indicatorColor="white"

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

@ -39,62 +39,13 @@ exports[`index slot 1`] = `
</div> </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`] = ` exports[`render image 1`] = `
<div class="van-image-preview" name="van-fade"> <div class="van-image-preview" name="van-fade">
<div class="van-swipe van-image-preview__swipe"> <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__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);">
<div class="van-swipe-item" style="width: 0px;"> <div class="van-swipe-item" style="width: 0px;"></div>
<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-swipe-item" style="width: 0px;"></div>
<div class="van-image__loading"> <div class="van-swipe-item" style="width: 0px;"></div>
<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> </div>
</div> </div>
<div class="van-image-preview__index">1 / 3</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`] = ` exports[`zoom 1`] = `
<div class="van-image-preview" name="van-fade"> <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-swipe van-image-preview__swipe"> <div class="van-image__loading">
<div class="van-swipe__track" style="width: 300px; transition-duration: 0ms; transform: translateX(0px);"> <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 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> </div>
<div class="van-image-preview__index">1 / 3</div>
</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); triggerZoom(image, 300, 300);
Element.prototype.getBoundingClientRect = getBoundingClientRect; Element.prototype.getBoundingClientRect = getBoundingClientRect;
}); });
@ -195,10 +196,12 @@ test('zoom', async () => {
propsData: { images, value: true }, propsData: { images, value: true },
}); });
const image = wrapper.find('img'); await later();
const image = wrapper.find('.van-image');
triggerZoom(image, 300, 300); triggerZoom(image, 300, 300);
triggerDrag(image, 300, 300); triggerDrag(image, 300, 300);
expect(wrapper).toMatchSnapshot();
expect(image).toMatchSnapshot();
Element.prototype.getBoundingClientRect = getBoundingClientRect; Element.prototype.getBoundingClientRect = getBoundingClientRect;
}); });
@ -257,18 +260,3 @@ test('closeOnPopstate', () => {
trigger(window, 'popstate'); trigger(window, 'popstate');
expect(wrapper.emitted('input')[1]).toBeFalsy(); 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(); expect(wrapper.emitted('delete')).toBeFalsy();
}); });
test('click to preview image', () => { test('click to preview image', async () => {
const wrapper = mount(Uploader, { const wrapper = mount(Uploader, {
propsData: { propsData: {
previewFullImage: false, previewFullImage: false,
@ -397,6 +397,8 @@ test('click to preview image', () => {
wrapper.setProps({ previewFullImage: true }); wrapper.setProps({ previewFullImage: true });
wrapper.find('.van-image').trigger('click'); wrapper.find('.van-image').trigger('click');
await later();
const imagePreviewNode2 = document.querySelector('.van-image-preview'); const imagePreviewNode2 = document.querySelector('.van-image-preview');
const images = imagePreviewNode2.querySelectorAll( const images = imagePreviewNode2.querySelectorAll(
'.van-image-preview__image' '.van-image-preview__image'