[new feature] ImagePreview: add lazyLoad prop (#2569)

packages/card/index.js

@@ -9,7 +9,6 @@ export default sfc({
     desc: String,
     thumb: String,
     title: String,
-    centered: Boolean,
     lazyLoad: Boolean,
     thumbLink: String,
     num: [Number, String],

packages/image-preview/ImagePreview.js

@@ -10,10 +10,7 @@ const MIN_ZOOM = 1 / 3;
 
 function getDistance(touches) {
   return Math.sqrt(
-    Math.abs(
-      (touches[0].clientX - touches[1].clientX) *
-        (touches[0].clientY - touches[1].clientY)
-    )
+    Math.abs((touches[0].clientX - touches[1].clientX) * (touches[0].clientY - touches[1].clientY))
   );
 }
 
@@ -22,6 +19,7 @@ export default sfc({
 
   props: {
     images: Array,
+    lazyLoad: Boolean,
     asyncClose: Boolean,
     startPosition: Number,
     showIndicators: Boolean,
@@ -67,8 +65,8 @@ export default sfc({
       };
 
       if (scale !== 1) {
-        style.transform = `scale3d(${scale}, ${scale}, 1) translate(${this
-          .moveX / scale}px, ${this.moveY / scale}px)`;
+        style.transform = `scale3d(${scale}, ${scale}, 1) translate(${this.moveX / scale}px, ${this
+          .moveY / scale}px)`;
       }
 
       return style;
@@ -171,11 +169,7 @@ export default sfc({
       if (this.moving || this.zooming) {
         let stopPropagation = true;
 
-        if (
-          this.moving &&
-          this.startMoveX === this.moveX &&
-          this.startMoveY === this.moveY
-        ) {
+        if (this.moving && this.startMoveX === this.moveX && this.startMoveY === this.moveY) {
           stopPropagation = false;
         }
 
@@ -230,19 +224,23 @@ export default sfc({
         show-indicators={this.showIndicators}
         onChange={this.onChange}
       >
-        {images.map((item, index) => (
-          <SwipeItem>
-            <img
-              class={bem('image')}
-              src={item}
-              style={index === active ? this.imageStyle : null}
-              onTouchstart={this.onTouchStart}
-              onTouchmove={this.onTouchMove}
-              onTouchend={this.onTouchEnd}
-              onTouchcancel={this.onTouchEnd}
-            />
-          </SwipeItem>
-        ))}
+        {images.map((image, index) => {
+          const props = {
+            class: bem('image'),
+            style: index === active ? this.imageStyle : null,
+            on: {
+              touchstart: this.onTouchStart,
+              touchmove: this.onTouchMove,
+              touchend: this.onTouchEnd,
+              touchcancel: this.onTouchEnd
+            }
+          };
+          return (
+            <SwipeItem>
+              {this.lazyLoad ? <img v-lazy={image} {...props} /> : <img src={image} {...props} />}
+            </SwipeItem>
+          );
+        })}
       </Swipe>
     );
 

packages/image-preview/en-US.md

@@ -60,6 +60,7 @@ setTimeout(() => {
 | onClose | Close callback | `Function` | - |
 | asyncClose | Whether to enable async close | `Boolean` | `false` |
 | className | Custom className | `String | Array | Object` | - |
+| lazyLoad | Whether to enable thumb lazy load，should register [Lazyload](#/en-US/lazyload) component | `Boolean` | `false` |
 
 ### onClose Parematers
 

packages/image-preview/index.js

@@ -9,6 +9,7 @@ const defaultConfig = {
   loop: true,
   value: true,
   className: '',
+  lazyLoad: false,
   showIndex: true,
   asyncClose: false,
   startPosition: 0,

packages/image-preview/zh-CN.md

@@ -68,6 +68,7 @@ setTimeout(() => {
 | onClose | 关闭时的回调函数 | `Function` | - | 1.1.16 |
 | asyncClose | 是否开启异步关闭 | `Boolean` | `false` | 1.4.8 |
 | className | 自定义类名 | `String | Array | Object` | - | 1.5.2 |
+| lazyLoad | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | `Boolean` | `false` | 1.5.3 |
 
 ### onClose 回调参数
 

types/image-preview.d.ts

@@ -5,6 +5,7 @@ export type ImagePreviewOptions = string[] | {
   images: string[];
   className?: any;
   startPosition?: number;
+  lazyLoad?: boolean;
   showIndex?: boolean;
   asyncClose?: boolean;
   showIndicators?: boolean;