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

smallCabbage · Mar 22, 2020 · 7ac8586 · 7ac8586
1 parent 365f2b1
commit 7ac8586
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 97 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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'