chore(Sku): prettier code

src/sku/README.md

@@ -45,7 +45,7 @@ export default {
 };
 ```
 
-### Custom Stepper Config
+### Custom Stepper
 
 ```html
 <van-sku

src/sku/Sku.js

@@ -28,12 +28,14 @@ const { QUOTA_LIMIT } = LIMIT_TYPE;
 export default createComponent({
   props: {
     sku: Object,
-    priceTag: String,
     goods: Object,
     value: Boolean,
     buyText: String,
     goodsId: [Number, String],
+    priceTag: String,
+    lazyLoad: Boolean,
     hideStock: Boolean,
+    properties: Array,
     addCartText: String,
     stepperTitle: String,
     getContainer: [String, Function],
@@ -44,7 +46,6 @@ export default createComponent({
     closeOnClickOverlay: Boolean,
     disableStepperInput: Boolean,
     resetSelectedSkuOnHide: Boolean,
-    properties: Array,
     quota: {
       type: Number,
       default: 0,
@@ -102,7 +103,6 @@ export default createComponent({
       type: Boolean,
       default: true,
     },
-    lazyLoad: Boolean,
   },
 
   data() {
@@ -117,6 +117,7 @@ export default createComponent({
   watch: {
     show(val) {
       this.$emit('input', val);
+
       if (!val) {
         this.$emit('sku-close', {
           selectedSkuValues: this.selectedSkuValues,
@@ -161,7 +162,6 @@ export default createComponent({
         return;
       }
 
-      // header高度82px, sku actions高度50px，如果改动了样式自己传下bodyOffsetTop调整下
       const maxHeight = window.innerHeight - this.bodyOffsetTop;
 
       return {
@@ -174,15 +174,11 @@ export default createComponent({
       if (this.hasSku && !isAllSelected(this.skuTree, this.selectedSku)) {
         return false;
       }
+
       // 属性未全选
-      if (
-        this.propList.some(
-          (it) => (this.selectedProp[it.k_id] || []).length < 1
-        )
-      ) {
-        return false;
-      }
-      return true;
+      return !this.propList.some(
+        (it) => (this.selectedProp[it.k_id] || []).length < 1
+      );
     },
 
     isSkuEmpty() {
@@ -614,6 +610,7 @@ export default createComponent({
       sku,
       goods,
       price,
+      lazyLoad,
       originPrice,
       skuEventBus,
       selectedSku,
@@ -622,8 +619,8 @@ export default createComponent({
       stepperTitle,
       selectedSkuComb,
       showHeaderImage,
-      lazyLoad = false,
     } = this;
+
     const slotsProps = {
       price,
       originPrice,
@@ -632,6 +629,7 @@ export default createComponent({
       selectedSku,
       selectedSkuComb,
     };
+
     const slots = (name) => this.slots(name, slotsProps);
 
     const Header = slots('sku-header') || (
@@ -694,12 +692,12 @@ export default createComponent({
                 >
                   <SkuRowItem
                     skuList={sku.list}
+                    lazyLoad={lazyLoad}
                     skuValue={skuValue}
+                    skuKeyStr={skuTreeItem.k_s}
                     selectedSku={selectedSku}
                     skuEventBus={skuEventBus}
-                    skuKeyStr={skuTreeItem.k_s}
                     largePicturePreview={skuTreeItem.large_picture_preview}
-                    lazyLoad={lazyLoad}
                   ></SkuRowItem>
                 </template>
               ))}

src/sku/components/SkuRowItem.js

@@ -5,19 +5,23 @@ const [createComponent] = createNamespace('sku-row-item');
 
 export default createComponent({
   props: {
+    lazyLoad: Boolean,
     skuValue: Object,
     skuKeyStr: String,
     skuEventBus: Object,
     selectedSku: Object,
+    largePicturePreview: Boolean,
     skuList: {
       type: Array,
       default: () => [],
     },
-    largePicturePreview: Boolean,
-    lazyLoad: Boolean,
   },
 
   computed: {
+    imgUrl() {
+      return this.skuValue.imgUrl || this.skuValue.img_url;
+    },
+
     choosable() {
       return isSkuChoosable(this.skuList, this.selectedSku, {
         key: this.skuKeyStr,
@@ -35,45 +39,51 @@ export default createComponent({
         });
       }
     },
+
     onPreviewImg(event) {
       event.stopPropagation();
-      this.skuEventBus.$emit(
-        'sku:previewImage',
-        this.skuValue.imgUrl || this.skuValue.img_url
-      );
+      this.skuEventBus.$emit('sku:previewImage', this.imgUrl);
+    },
+
+    genImage(classPrefix) {
+      const { imgUrl } = this;
+
+      if (imgUrl && this.largePicturePreview) {
+        if (this.lazyLoad) {
+          return (
+            <img class={`${classPrefix}-img`} src={imgUrl} vLazy={imgUrl} />
+          );
+        }
+
+        return <img class={`${classPrefix}-img`} src={imgUrl} />;
+      }
     },
   },
 
   render() {
     const choosed = this.skuValue.id === this.selectedSku[this.skuKeyStr];
-    const imgUrl = this.skuValue.imgUrl || this.skuValue.img_url;
-    const BEM_NAME = this.largePicturePreview
+    const classPrefix = this.largePicturePreview
       ? 'van-sku-row__picture-item'
       : 'van-sku-row__item';
 
     return (
       <span
         class={[
-          `${BEM_NAME}`,
-          choosed ? `${BEM_NAME}--active` : '',
-          !this.choosable ? `${BEM_NAME}--disabled` : '',
+          classPrefix,
+          choosed ? `${classPrefix}--active` : '',
+          !this.choosable ? `${classPrefix}--disabled` : '',
         ]}
         onClick={this.onSelect}
       >
         {this.largePicturePreview && (
           <img
-            class={`${BEM_NAME}-img-icon`}
+            class={`${classPrefix}-img-icon`}
             src="https://img.yzcdn.cn/upload_files/2020/06/18/Fn6Qf0fGRFyuD8xh0Gi1w2ng59G1.png"
             onClick={this.onPreviewImg}
           />
         )}
-        {imgUrl &&
-          (this.largePicturePreview && 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>
+        {this.genImage(classPrefix)}
+        <span class={`${classPrefix}-name`}>{this.skuValue.name}</span>
       </span>
     );
   },

src/sku/demo/index.vue

@@ -1,21 +1,20 @@
 <template>
   <demo-section>
-    <!-- 基础用法 -->
     <demo-block :title="t('basicUsage')">
       <div class="sku-container">
         <van-sku
           v-model="showBase"
           :sku="skuData.sku"
+          :quota="skuData.quota"
           :goods="skuData.goods_info"
           :goods-id="skuData.goods_id"
-          :hide-stock="skuData.sku.hide_stock"
-          :quota="skuData.quota"
           :quota-used="skuData.quota_used"
+          :properties="skuData.properties"
+          :hide-stock="skuData.sku.hide_stock"
+          :message-config="messageConfig"
           :start-sale-num="skuData.start_sale_num"
           :close-on-click-overlay="closeOnClickOverlay"
-          :message-config="messageConfig"
           :custom-sku-validator="customSkuValidator"
-          :properties="skuData.properties"
           disable-stepper-input
           reset-stepper-on-hide
           safe-area-inset-bottom
@@ -29,21 +28,20 @@
       </div>
     </demo-block>
 
-    <!-- 自定义步进器 -->
-    <demo-block :title="t('title2')">
+    <demo-block :title="t('customStepper')">
       <div class="sku-container">
         <van-sku
           v-model="showStepper"
           :sku="skuData.sku"
+          :quota="skuData.quota"
           :goods="skuData.goods_info"
           :goods-id="skuData.goods_id"
-          :hide-stock="skuData.sku.hide_stock"
-          :quota="skuData.quota"
           :quota-used="skuData.quota_used"
-          :start-sale-num="skuData.start_sale_num"
-          :custom-stepper-config="customStepperConfig"
-          :message-config="messageConfig"
           :properties="skuData.properties"
+          :hide-stock="skuData.sku.hide_stock"
+          :start-sale-num="skuData.start_sale_num"
+          :message-config="messageConfig"
+          :custom-stepper-config="customStepperConfig"
           hide-quota-text
           safe-area-inset-bottom
           @buy-clicked="onBuyClicked"
@@ -55,22 +53,21 @@
       </div>
     </demo-block>
 
-    <!-- 隐藏售罄sku -->
     <demo-block :title="t('hideSoldoutSku')">
       <div class="sku-container">
         <van-sku
           v-model="showSoldout"
           :sku="skuData.sku"
+          :quota="skuData.quota"
           :goods="skuData.goods_info"
           :goods-id="skuData.goods_id"
-          :hide-stock="skuData.sku.hide_stock"
-          :quota="skuData.quota"
           :quota-used="skuData.quota_used"
-          :start-sale-num="skuData.start_sale_num"
-          :custom-stepper-config="customStepperConfig"
-          :message-config="messageConfig"
-          :show-soldout-sku="false"
           :properties="skuData.properties"
+          :hide-stock="skuData.sku.hide_stock"
+          :message-config="messageConfig"
+          :start-sale-num="skuData.start_sale_num"
+          :show-soldout-sku="false"
+          :custom-stepper-config="customStepperConfig"
           hide-quota-text
           safe-area-inset-bottom
           @buy-clicked="onBuyClicked"
@@ -82,23 +79,22 @@
       </div>
     </demo-block>
 
-    <!-- 大图模式 -->
     <demo-block :title="t('largePicturePreview')">
       <div class="sku-container">
         <van-sku
           v-model="showLargePicturePreview"
           :sku="skuData.sku"
+          :quota="skuData.quota"
           :goods="skuData.goods_info"
           :goods-id="skuData.goods_id"
           :hide-stock="skuData.sku.hide_stock"
-          :quota="skuData.quota"
-          :quota-used="skuData.quota_used"
-          :start-sale-num="skuData.start_sale_num"
-          :close-on-click-overlay="closeOnClickOverlay"
-          :message-config="messageConfig"
-          :custom-sku-validator="customSkuValidator"
           :properties="skuData.properties"
+          :quota-used="skuData.quota_used"
+          :message-config="messageConfig"
+          :start-sale-num="skuData.start_sale_num"
           :show-header-image="false"
+          :custom-sku-validator="customSkuValidator"
+          :close-on-click-overlay="closeOnClickOverlay"
           disable-stepper-input
           reset-stepper-on-hide
           safe-area-inset-bottom
@@ -185,22 +181,22 @@ import { LIMIT_TYPE } from '../constants';
 export default {
   i18n: {
     'zh-CN': {
-      title2: '自定义步进器',
       button1: '积分兑换',
       button2: '买买买',
       actionsTop: '商品不多，赶快购买吧',
       stepperTitle: '我要买',
       customBySlot: '通过插槽定制',
+      customStepper: '自定义步进器',
       hideSoldoutSku: '隐藏售罄规格',
       largePicturePreview: '大图预览模式',
     },
     'en-US': {
-      title2: 'Custom Stepper Related Config',
       button1: 'Button',
       button2: 'Button',
       actionsTop: 'Action top info',
       customBySlot: 'Custom By Slot',
       stepperTitle: 'Stepper title',
+      customStepper: 'Custom Stepper',
       hideSoldoutSku: 'Hide Soldout Sku',
       largePicturePreview: 'Large Picture Preview',
     },

src/sku/test/__snapshots__/demo.spec.js.snap

@@ -14,7 +14,7 @@ exports[`renders demo correctly 1`] = `
     <div class="sku-container">
       <!----> <button class="van-button van-button--primary van-button--normal van-button--block">
         <div class="van-button__content"><span class="van-button__text">
-        自定义步进器
+
       </span></div>
       </button></div>
   </div>