feat: lazy-load change and readme change

src/sku/README.md

@@ -141,8 +141,7 @@ export default {
 | properties `v2.4.2` | Goods properties | _array_ | - |
 | preview-on-click-image `v2.5.2` | Whether to preview image when click goods image | _boolean_ | `true` |
 | supportBigPicture `v2.9.0` | Whether to display large image mode | _boolean_ | `false` |
-| supportBigPictureIndex `v2.9.0` | The index value of the large image mode | _number_ | `0` |
+| lazy-load | Whether to enable lazy load，should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` |
-| hasScrollTab `v2.9.0` | Whether the large image mode displays a scroll bar | _boolean_ | `false` |
 
 ### Events
 

src/sku/README.zh-CN.md

@@ -145,8 +145,7 @@ export default {
 | properties `v2.4.2` | 商品属性 | _array_ | - |
 | preview-on-click-image `v2.5.2` | 是否在点击商品图片时自动预览 | _boolean_ | `true` |
 | supportBigPicture `v2.9.0` | 是否展示大图模式 | _boolean_ | `false` |
-| supportBigPictureIndex `v2.9.0` | 多规格情况下，大图模式的索引值 | _number_ | `0` |
+| lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |
-| hasScrollTab `v2.9.0` | 大图模式下，是否展示滚动条 | _boolean_ | `false` |
 
 ### Events
 

src/sku/Sku.js

@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import Popup from '../popup';
 import Toast from '../toast';
-import Lazyload from '../lazyload';
 import ImagePreview from '../image-preview';
 import SkuHeader from './components/SkuHeader';
 import SkuHeaderItem from './components/SkuHeaderItem';
@@ -26,8 +25,6 @@ const namespace = createNamespace('sku');
 const [createComponent, bem, t] = namespace;
 const { QUOTA_LIMIT } = LIMIT_TYPE;
 
-Vue.use(Lazyload);
-
 export default createComponent({
   props: {
     sku: Object,
@@ -105,14 +102,7 @@ export default createComponent({
       type: Boolean,
       default: false,
     },
-    supportBigPictureIndex: {
+    lazyLoad: Boolean,
-      type: Number,
-      default: 0,
-    },
-    hasScrollTab: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   data() {
@@ -632,8 +622,7 @@ export default createComponent({
       stepperTitle,
       selectedSkuComb,
       supportBigPicture,
-      supportBigPictureIndex,
+      lazyLoad = false,
-      hasScrollTab,
     } = this;
     const slotsProps = {
       price,
@@ -687,44 +676,37 @@ export default createComponent({
       slots('sku-group') ||
       (this.hasSkuOrAttr && (
         <div class={this.skuGroupClass}>
-          {this.skuTree.map((skuTreeItem, index) => (
+          {this.skuTree.map((skuTreeItem) => (
             <SkuRow
               skuRow={skuTreeItem}
               isShowBigPicture={
-                supportBigPicture && supportBigPictureIndex === index
+                supportBigPicture && skuTreeItem.is_support_big_picture
               }
-              hasScrollTab={hasScrollTab && skuTreeItem.v.length > 6}
+              hasScrollTab={skuTreeItem.v.length > 6}
             >
-              {skuTreeItem.v.map((skuValue, itemIndex) => {
+              {skuTreeItem.v.map((skuValue, itemIndex) => (
-                return supportBigPicture && supportBigPictureIndex === index ? (
+                <template
-                  <template
+                  slot={
-                    slot={
+                    supportBigPicture && skuTreeItem.is_support_big_picture
-                      Math.floor(itemIndex / 3) % 2 === 0
+                      ? Math.floor(itemIndex / 3) % 2 === 0
                         ? 'sku-item-group-one'
                         : 'sku-item-group-two'
-                    }
+                      : 'default'
-                  >
+                  }
-                    <SkuRowItem
+                >
-                      skuList={sku.list}
-                      skuValue={skuValue}
-                      selectedSku={selectedSku}
-                      skuEventBus={skuEventBus}
-                      skuKeyStr={skuTreeItem.k_s}
-                      isShowBigPicture={
-                        supportBigPicture && supportBigPictureIndex === index
-                      }
-                    ></SkuRowItem>
-                  </template>
-                ) : (
                   <SkuRowItem
                     skuList={sku.list}
                     skuValue={skuValue}
                     selectedSku={selectedSku}
                     skuEventBus={skuEventBus}
                     skuKeyStr={skuTreeItem.k_s}
+                    isShowBigPicture={
+                      supportBigPicture && skuTreeItem.is_support_big_picture
+                    }
+                    lazyLoad={lazyLoad}
                   ></SkuRowItem>
-                );
+                </template>
-              })}
+              ))}
             </SkuRow>
           ))}
           {this.propList.map((skuTreeItem) => (

src/sku/components/SkuRowItem.js

@@ -14,6 +14,7 @@ export default createComponent({
       default: () => [],
     },
     isShowBigPicture: Boolean,
+    lazyLoad: Boolean,
   },
 
   computed: {
@@ -66,9 +67,12 @@ export default createComponent({
             onClick={this.onPreviewImg}
           />
         )}
-        {imgUrl && (
+        {imgUrl &&
-          <img class={`${BEM_NAME}-img`} src={imgUrl} v-lazy={imgUrl} />
+          (this.isShowBigPicture && this.lazyLoad ? (
-        )}
+            <img class={`${BEM_NAME}-img`} src={imgUrl} vLazy={imgUrl} />
+          ) : (
+            <img class={`${BEM_NAME}-img`} src={imgUrl} />
+          ))}
         <span class={`${BEM_NAME}-name`}>{this.skuValue.name}</span>
       </span>
     );

src/sku/demo/data.ts

@@ -35,6 +35,7 @@ export const skuData = {
         ],
         k_s: 's1',
         count: 2,
+        is_support_big_picture: true,
       },
       {
         k: '尺寸',

src/sku/index.less

@@ -279,9 +279,11 @@
         }
       }
     }
+
     &__content {
       overflow-x: scroll;
-      ::-webkit-scrollbar {
+
+      &::-webkit-scrollbar {
         display: none;
       }