[Improvement] Sku: optimize DOM (#704)

2026-04-19 01:02:21 +08:00 · 2018-03-16 20:27:59 +08:00
parent ffd72e5442
commit 4c195fd664
26 changed files with 228 additions and 265 deletions
--- a/packages/sku/Sku.vue
+++ b/packages/sku/Sku.vue
@@ -3,98 +3,91 @@
    v-if="!isSkuEmpty"
    v-model="show"
    position="bottom"
+    class="van-sku-container"
    :close-on-click-overlay="closeOnClickOverlay"
    :get-container="getContainer"
  >
-    <div class="van-sku-container">
-      <div class="van-sku-layout">
-        <!-- sku-header -->
-        <slot
-          name="sku-header"
+    <!-- sku-header -->
+    <slot
+      name="sku-header"
+      :sku-event-bus="skuEventBus"
+      :selected-sku="selectedSku"
+      :selected-sku-comb="selectedSkuComb"
+    >
+      <sku-header
+        :sku-event-bus="skuEventBus"
+        :selected-sku="selectedSku"
+        :selected-sku-comb="selectedSkuComb"
+        :goods="goods"
+        :sku="sku"
+      />
+    </slot>
+    <div class="van-sku-body" :style="bodyStyle">
+      <!-- sku-body-top -->
+      <slot name="sku-body-top" :selected-sku="selectedSku" :sku-event-bus="skuEventBus" />
+      <!-- sku-group -->
+      <slot name="sku-group" :selected-sku="selectedSku" :sku-event-bus="skuEventBus">
+        <div v-if="hasSku" class="van-sku-group-container van-hairline--bottom">
+          <sku-row
+            v-for="(skuTreeItem, index) in skuTree"
+            :key="index"
+            :sku-row="skuTreeItem"
+          >
+            <sku-row-item
+              v-for="(skuValue, index) in skuTreeItem.v"
+              :key="index"
+              :sku-key-str="skuTreeItem.k_s"
+              :sku-value="skuValue"
+              :sku-event-bus="skuEventBus"
+              :selected-sku="selectedSku"
+              :sku-list="sku.list"
+            />
+          </sku-row>
+        </div>
+      </slot>
+      <!-- extra-sku-group -->
+      <slot name="extra-sku-group" :sku-event-bus="skuEventBus"/>
+      <!-- sku-stepper -->
+      <slot
+        name="sku-stepper"
+        :sku-event-bus="skuEventBus"
+        :selected-sku="selectedSku"
+        :selected-sku-comb="selectedSkuComb"
+        :selected-num="selectedNum"
+      >
+        <sku-stepper
+          ref="skuStepper"
          :sku-event-bus="skuEventBus"
          :selected-sku="selectedSku"
          :selected-sku-comb="selectedSkuComb"
-        >
-          <sku-header
-            :sku-event-bus="skuEventBus"
-            :selected-sku="selectedSku"
-            :selected-sku-comb="selectedSkuComb"
-            :goods="goods"
-            :sku="sku"
-          />
-        </slot>
-        <div class="van-sku-body" :style="bodyStyle">
-          <!-- sku-body-top -->
-          <slot name="sku-body-top" :selected-sku="selectedSku" :sku-event-bus="skuEventBus" />
-          <!-- sku-group -->
-          <slot name="sku-group" :selected-sku="selectedSku" :sku-event-bus="skuEventBus">
-            <div v-if="hasSku" class="van-sku-group-container van-hairline--bottom">
-              <div
-                v-for="(skuTreeItem, index) in skuTree"
-                class="van-sku-row-group"
-                :key="index">
-                <sku-row
-                  :sku-event-bus="skuEventBus"
-                  :sku-row="skuTreeItem"
-                >
-                  <sku-row-item
-                    v-for="(skuValue, index) in skuTreeItem.v"
-                    :key="index"
-                    :sku-key-str="skuTreeItem.k_s"
-                    :sku-value="skuValue"
-                    :sku-event-bus="skuEventBus"
-                    :selected-sku="selectedSku"
-                    :sku-list="sku.list"
-                  />
-                </sku-row>
-              </div>
-            </div>
-          </slot>
-          <!-- extra-sku-group -->
-          <slot name="extra-sku-group" :sku-event-bus="skuEventBus"/>
-          <!-- sku-stepper -->
-          <slot
-            name="sku-stepper"
-            :sku-event-bus="skuEventBus"
-            :selected-sku="selectedSku"
-            :selected-sku-comb="selectedSkuComb"
-            :selected-num="selectedNum"
-          >
-            <sku-stepper
-              ref="skuStepper"
-              :sku-event-bus="skuEventBus"
-              :selected-sku="selectedSku"
-              :selected-sku-comb="selectedSkuComb"
-              :selected-num="selectedNum"
-              :stepper-title="stepperTitle"
-              :sku-stock-num="sku.stock_num"
-              :quota="quota"
-              :quota-used="quotaUsed"
-              :disable-stepper-input="disableStepperInput"
-              :hide-stock="hideStock"
-              :custom-stepper-config="customStepperConfig"
-            />
-          </slot>
-          <!-- sku-messages -->
-          <slot name="sku-messages">
-            <sku-messages
-              ref="skuMessages"
-              :goods-id="goodsId"
-              :message-config="messageConfig"
-              :messages="sku.messages"
-            />
-          </slot>
-        </div>
-        <!-- sku-actions -->
-        <slot name="sku-actions" :sku-event-bus="skuEventBus">
-          <sku-actions
-            :sku-event-bus="skuEventBus"
-            :buy-text="buyText"
-            :show-add-cart-btn="showAddCartBtn"
-          />
-        </slot>
-      </div>
+          :selected-num="selectedNum"
+          :stepper-title="stepperTitle"
+          :sku-stock-num="sku.stock_num"
+          :quota="quota"
+          :quota-used="quotaUsed"
+          :disable-stepper-input="disableStepperInput"
+          :hide-stock="hideStock"
+          :custom-stepper-config="customStepperConfig"
+        />
+      </slot>
+      <!-- sku-messages -->
+      <slot name="sku-messages">
+        <sku-messages
+          ref="skuMessages"
+          :goods-id="goodsId"
+          :message-config="messageConfig"
+          :messages="sku.messages"
+        />
+      </slot>
    </div>
+    <!-- sku-actions -->
+    <slot name="sku-actions" :sku-event-bus="skuEventBus">
+      <sku-actions
+        :sku-event-bus="skuEventBus"
+        :buy-text="buyText"
+        :show-add-cart-btn="showAddCartBtn"
+      />
+    </slot>
  </popup>
 </template>

@@ -225,9 +218,8 @@ export default create({
        return;
      }

-      const windowHeight = window.innerHeight;
      // header高度82px, sku actions高度50px，如果改动了样式自己传下bodyOffsetTop调整下
-      const maxHeight = windowHeight - this.bodyOffsetTop;
+      const maxHeight = window.innerHeight - this.bodyOffsetTop;

      return {
        maxHeight: maxHeight + 'px'
@@ -268,12 +260,12 @@ export default create({
    const skuEventBus = new Vue();
    this.skuEventBus = skuEventBus;

-    skuEventBus.$on('sku:close', this.onCloseClicked);
-    skuEventBus.$on('sku:select', this.onSkuSelected);
+    skuEventBus.$on('sku:close', this.onClose);
+    skuEventBus.$on('sku:select', this.onSelect);
    skuEventBus.$on('sku:numChange', this.onNumChange);
    skuEventBus.$on('sku:overLimit', this.onOverLimit);
-    skuEventBus.$on('sku:addCart', this.onAddCartClicked);
-    skuEventBus.$on('sku:buy', this.onBuyClicked);
+    skuEventBus.$on('sku:addCart', this.onAddCart);
+    skuEventBus.$on('sku:buy', this.onBuy);

    this.resetSelectedSku(this.skuTree);
    // 组件初始化后的钩子，抛出skuEventBus
@@ -315,19 +307,17 @@ export default create({
      }

      if (this.isSkuCombSelected) {
-        const error = this.validateSkuMessages();
-        // sku留言没有错误则校验通过
-        return error;
-      } else {
-        return this.$t('spec');
+        return this.validateSkuMessages();
      }
+
+      return this.$t('spec');
    },

-    onCloseClicked() {
+    onClose() {
      this.show = false;
    },

-    onSkuSelected(skuValue) {
+    onSelect(skuValue) {
      // 点击已选中的sku时则取消选中
      this.selectedSku =
        this.selectedSku[skuValue.skuKeyStr] === skuValue.id
@@ -367,11 +357,11 @@ export default create({
      }
    },

-    onAddCartClicked() {
+    onAddCart() {
      this.onBuyOrAddCart('add-cart');
    },

-    onBuyClicked() {
+    onBuy() {
      this.onBuyOrAddCart('buy-clicked');
    },

--- a/packages/sku/components/SkuHeader.vue
+++ b/packages/sku/components/SkuHeader.vue
@@ -1,12 +1,14 @@
 <template>
  <div class="van-sku-header van-hairline--bottom">
    <div class="van-sku-header__img-wrap">
-      <img class="van-sku__goods-img" :src="goodsImg" >
+      <img :src="goodsImg" >
    </div>
    <div class="van-sku-header__goods-info">
      <div class="van-sku__goods-name van-ellipsis">{{ goods.title }}</div>
-      <div class="van-sku__goods-price"><span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ price }}</span></div>
-      <span class="van-sku__close-icon" @click="skuEventBus.$emit('sku:close')" />
+      <div class="van-sku__goods-price">
+        <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ price }}</span>
+      </div>
+      <icon name="close" class="van-sku__close-icon" @click="skuEventBus.$emit('sku:close')" />
    </div>
  </div>
 </template>
@@ -18,11 +20,11 @@ export default create({
  name: 'sku-header',

  props: {
-    skuEventBus: Object,
    sku: Object,
+    goods: Object,
+    skuEventBus: Object,
    selectedSku: Object,
-    selectedSkuComb: Object,
-    goods: Object
+    selectedSkuComb: Object
  },

  computed: {
@@ -32,6 +34,7 @@ export default create({
      // 优先使用选中sku的图片
      return skuImg || this.goods.picture;
    },
+
    price() {
      if (this.selectedSkuComb) {
        return (this.selectedSkuComb.price / 100).toFixed(2);
--- a/packages/sku/components/SkuImgUploader.vue
+++ b/packages/sku/components/SkuImgUploader.vue
@@ -2,56 +2,51 @@
  <div class="van-sku-img-uploader">
    <!-- 头部 -->
    <van-uploader
-      :disabled="!canUpload"
-      :before-read="beforeReadFile"
+      :disabled="!!paddingImg"
      :after-read="afterReadFile"
-      accept="image/*">
+      :max-size="maxSize * 1024 * 1024"
+      accept="image/*"
+      @oversize="$toast($t('maxSize', maxSize))"
+    >
      <div class="van-sku-img-uploader__header">
        <div v-if="paddingImg">{{ $t('uploading') }}</div>
        <template v-else>
-          <van-icon name="photograph" />
-          <span class="label">{{ getPhotoText(value) }}</span> {{ $t('or') }}
-          <van-icon name="photo" />
-          <span class="label">{{ getPicText(value) }}</span>
+          <icon name="photograph" />
+          <span class="label">{{ $t(value ? 'rephoto' : 'photo') }}</span> {{ $t('or') }}
+          <icon name="photo" />
+          <span class="label">{{ $t(value ? 'reselect' : 'select') }}</span>
        </template>
      </div>
    </van-uploader>
    <!-- 图片列表区域 -->
-    <div class="van-sku-img-uploader__imglist" v-if="paddingImg || imgList.length > 0">
+    <div class="van-clearfix" v-if="paddingImg || imgList.length > 0">
      <!-- 已有的图片,图片右上角显示删除按钮 -->
      <div
        v-for="(img, index) in imgList"
        :key="index"
-        class="van-sku-img-uploader__img-container">
-        <span class="van-sku-img-uploader__delete-picture" @click="deleteImg(index)">
-          <van-icon name="clear" />
-        </span>
+        class="van-sku-img-uploader__img"
+      >
        <img :src="img">
+        <icon name="clear" class="van-sku-img-uploader__delete" @click="$emit('input', '')" />
      </div>
      <!-- 正在上传的图片,有上传等待提示 -->
-      <div
-        v-if="paddingImg"
-        class="van-sku-img-uploader__img-container">
+      <div v-if="paddingImg" class="van-sku-img-uploader__img">
        <img :src="paddingImg">
-        <van-loading class="van-sku-img-uploader__uploading" type="spinner" color="black" />
+        <loading class="van-sku-img-uploader__uploading" type="spinner" color="black" />
      </div>
    </div>
  </div>
 </template>

 <script>
-import Icon from '../../icon';
-import Uploader from '../../uploader';
-import Loading from '../../loading';
+import VanUploader from '../../uploader';
 import { create } from '../../utils';

 export default create({
  name: 'sku-img-uploader',

  components: {
-    'van-uploader': Uploader,
-    'van-icon': Icon,
-    'van-loading': Loading
+    VanUploader
  },

  props: {
@@ -72,50 +67,25 @@ export default create({
      paddingImg: ''
    };
  },
+
  computed: {
    imgList() {
      return this.value && !this.paddingImg ? [this.value] : [];
-    },
-    canUpload() {
-      // 判断当前是否允许上传图片
-      if (this.paddingImg) return false;
-      return true;
    }
  },

  methods: {
-    getPhotoText(value) {
-      return value ? this.$t('rephoto') : this.$t('photo');
-    },
-
-    getPicText(value) {
-      return value ? this.$t('reselect') : this.$t('select');
-    },
-    beforeReadFile(file) {
-      // 拦截非图片的文件，以及大小限制
-      if (file.size > this.maxSize * 1024 * 1024) {
-        Toast(this.$t('maxSize', this.maxSize));
-        return false;
-      }
-      return true;
-    },
    afterReadFile(file) {
      // 上传文件
      this.paddingImg = file.content;
-      this.uploadImg(file.file).then(img => {
-        this.updateImg(img);
+      this.uploadImg(file.file, file.content).then(img => {
+        this.$emit('input', img);
        this.$nextTick(() => {
          this.paddingImg = '';
        });
      }).catch(() => {
        this.paddingImg = '';
      });
-    },
-    deleteImg() {
-      this.$emit('input', '');
-    },
-    updateImg(img) {
-      this.$emit('input', img);
    }
  }
 });
--- a/packages/sku/components/SkuMessages.vue
+++ b/packages/sku/components/SkuMessages.vue
@@ -7,7 +7,8 @@
        :label="$t('onePic')"
        :key="`${goodsId}-${index}`"
        :required="message.required == '1'"
-        :title="message.name">
+        :title="message.name"
+      >
        <sku-img-uploader
          v-model="messageValues[index].value"
          :upload-img="messageConfig.uploadImg"
@@ -70,6 +71,7 @@ export default create({
    resetMessageValues(messages) {
      return (messages || []).map(() => ({ value: '' }));
    },
+
    getType(message) {
      if (+message.multiple === 1) {
        return 'textarea';
--- a/packages/sku/components/SkuRow.vue
+++ b/packages/sku/components/SkuRow.vue
@@ -1,9 +1,7 @@
 <template>
  <div class="van-sku-row">
    <div class="van-sku-row__title">{{ skuRow.k }}：</div>
-    <div class="van-sku-row__items">
-      <slot />
-    </div>
+    <slot />
  </div>
 </template>

--- a/packages/sku/components/SkuRowItem.vue
+++ b/packages/sku/components/SkuRowItem.vue
@@ -5,7 +5,7 @@
      'van-sku-row__item--active': isChoosed,
      'van-sku-row__item--disabled': !isChoosable
    }"
-    @click="onSkuSelected"
+    @click="onSelect"
  >
    {{ skuValue.name }}
  </span>
@@ -41,14 +41,14 @@ export default create({
          return matchedSku[skuKey] == sku[skuKey]; // eslint-disable-line
        });
      });
-      const stock = filteredSku.reduce((total, sku) => (total += sku.stock_num), 0);

+      const stock = filteredSku.reduce((total, sku) => (total += sku.stock_num), 0);
      return stock > 0;
    }
  },

  methods: {
-    onSkuSelected() {
+    onSelect() {
      if (this.isChoosable) {
        this.skuEventBus.$emit('sku:select', {
          ...this.skuValue,
--- a/packages/sku/components/SkuStepper.vue
+++ b/packages/sku/components/SkuStepper.vue
@@ -57,6 +57,7 @@ export default create({
    currentNum(num) {
      this.skuEventBus.$emit('sku:numChange', num);
    },
+
    stepperLimit(limit) {
      if (limit < this.currentNum) {
        this.currentNum = limit;
@@ -71,6 +72,7 @@ export default create({
      }
      return this.skuStockNum;
    },
+
    quotaText() {
      const { quotaText } = this.customStepperConfig;
      let text = '';
@@ -83,6 +85,7 @@ export default create({

      return text;
    },
+
    stepperLimit() {
      const quotaLimit = this.quota - this.quotaUsed;
      let limit;
@@ -105,6 +108,7 @@ export default create({
    setCurrentNum(num) {
      this.currentNum = num;
    },
+
    onOverLimit(action) {
      this.skuEventBus.$emit('sku:overLimit', {
        action,
@@ -113,6 +117,7 @@ export default create({
        quotaUsed: this.quotaUsed
      });
    },
+
    onChange(currentValue) {
      const { handleStepperChange } = this.customStepperConfig;
      handleStepperChange && handleStepperChange(currentValue);
--- a/packages/sku/utils/skuHelper.js
+++ b/packages/sku/utils/skuHelper.js
@@ -43,7 +43,7 @@ export const normalizeSkuTree = (skuTree) => {
 // 判断是否所有的sku都已经选中
 export const isAllSelected = (skuTree, selectedSku) => {
  // 筛选selectedSku对象中key值不为空的值
-  const selected = Object.keys(selectedSku).filter(skuKeyStr => selectedSku[skuKeyStr] !== '');
+  const selected = Object.keys(selectedSku).filter(skuKeyStr => selectedSku[skuKeyStr]);
  return skuTree.length === selected.length;
 };

@@ -53,8 +53,8 @@ export const getSkuComb = (skuList, selectedSku) => {
    return Object.keys(selectedSku).every(skuKeyStr => {
      return String(skuComb[skuKeyStr]) === String(selectedSku[skuKeyStr]); // eslint-disable-line
    });
-  })[0];
-  return skuComb;
+  });
+  return skuComb[0];
 };

 // 获取已选择的sku名称
@@ -72,10 +72,9 @@ export const getSelectedSkuValues = (skuTree, selectedSku) => {
  }, []);
 };

-const SkuHelper = {
+export default {
  normalizeSkuTree,
  isAllSelected,
  getSkuComb,
  getSelectedSkuValues
 };
-export default SkuHelper;