[Improvement] Sku: optimize DOM (#704)

2025-04-06 03:57:59 +08:00 · 2018-03-16 20:27:59 +08:00 · 2018-03-16 20:27:59 +08:00 · 4c195fd664
commit 4c195fd664
parent ffd72e5442
26 changed files with 228 additions and 265 deletions
--- a/docs/demos/views/sku.vue
+++ b/docs/demos/views/sku.vue
@ -33,6 +33,7 @@
          :quota="$t('sku').quota"
          :quota-used="$t('sku').quota_used"
          :custom-stepper-config="customStepperConfig"
+          :message-config="messageConfig"
          @buy-clicked="onBuyClicked"
          @add-cart="onAddCartClicked"
        />
@ -54,6 +55,7 @@
          show-add-cart-btn
          reset-stepper-on-hide
          :initial-sku="initialSku"
+          :message-config="messageConfig"
          @buy-clicked="onBuyClicked"
          @add-cart="onAddCartClicked"
        >
@ -119,9 +121,9 @@ export default {
        }
      },
      messageConfig: {
-        uploadImg: () => {
-          return new Promise((resolve) => {
-            setTimeout(() => resolve('https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
+        uploadImg: (file, img) => {
+          return new Promise(resolve => {
+            setTimeout(() => resolve(img), 1000);
          });
        },
        uploadMaxSize: 3
--- a/packages/address-edit/index.vue
+++ b/packages/address-edit/index.vue
@ -58,10 +58,10 @@
      />
    </cell-group>
    <div v-show="!hideBottomFields" class="van-address-edit__buttons">
-      <van-button block :loading="isSaving" @click="onSaveAddress" type="primary">
+      <van-button block :loading="isSaving" @click="onSave" type="primary">
        {{ $t('save') }}
      </van-button>
-      <van-button block :loading="isDeleting" @click="onDeleteAddress" v-if="isEdit">
+      <van-button block :loading="isDeleting" @click="onDelete" v-if="isEdit">
        {{ $t('deleteAddress', computedAddressText) }}
      </van-button>
    </div>
@ -108,10 +108,10 @@ export default create({

  components: {
    Field,
-    SwitchCell,
-    VanButton,
    Popup,
    VanArea,
+    VanButton,
+    SwitchCell,
    AddressEditDetail
  },

@ -223,7 +223,7 @@ export default create({
      });
    },

-    onSaveAddress() {
+    onSave() {
      const items = [
        'name',
        'tel',
@ -267,7 +267,7 @@ export default create({
      }
    },

-    onDeleteAddress() {
+    onDelete() {
      if (this.isDeleting) {
        return;
      }
--- a/packages/address-list/index.vue
+++ b/packages/address-list/index.vue
@ -13,10 +13,10 @@
    </radio-group>
    <cell
      icon="add"
-      class="van-address-list__add van-hairline--top"
-      @click="$emit('add')"
-      :title="addButtonText || $t('add')"
      is-link
+      class="van-address-list__add van-hairline--top"
+      :title="addButtonText || $t('add')"
+      @click="$emit('add')"
    />
  </div>
 </template>
--- a/packages/cell-group/index.vue
+++ b/packages/cell-group/index.vue
@ -5,11 +5,9 @@
 </template>

 <script>
-import install from '../utils/install';
-
-export default {
-  install,
+import create from '../utils/create-basic';

+export default create({
  name: 'cell-group',

  props: {
@ -18,5 +16,5 @@ export default {
      default: true
    }
  }
-};
+});
 </script>
--- a/packages/cell/index.vue
+++ b/packages/cell/index.vue
@ -38,12 +38,10 @@

 <script>
 import Icon from '../icon';
-import install from '../utils/install';
 import RouterLink from '../mixins/router-link';
+import create from '../utils/create-basic';

-export default {
-  install,
-
+export default create({
  name: 'cell',

  components: {
@ -72,5 +70,5 @@ export default {
      this.routerLink();
    }
  }
-};
+});
 </script>
--- a/packages/contact-list/index.vue
+++ b/packages/contact-list/index.vue
@ -13,10 +13,10 @@
    </radio-group>
    <cell
      icon="add"
-      class="van-contact-list__add van-hairline--top"
-      @click="$emit('add')"
-      :title="addText || $t('addText')"
      is-link
+      class="van-contact-list__add van-hairline--top"
+      :title="addText || $t('addText')"
+      @click="$emit('add')"
    />
  </div>
 </template>
--- a/packages/icon/index.vue
+++ b/packages/icon/index.vue
@ -6,16 +6,14 @@
 </template>

 <script>
-import install from '../utils/install';
-
-export default {
-  install,
+import create from '../utils/create-basic';

+export default create({
  name: 'icon',

  props: {
    name: String,
    info: String
  }
-};
+});
 </script>
--- a/packages/loading/index.vue
+++ b/packages/loading/index.vue
@ -10,11 +10,9 @@
 </template>

 <script>
-import install from '../utils/install';
-
-export default {
-  install,
+import create from '../utils/create-basic';

+export default create({
  name: 'loading',

  props: {
@ -37,5 +35,5 @@ export default {
      } : {};
    }
  }
-};
+});
 </script>
--- 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;
--- a/packages/utils/create-basic.js
+++ b/packages/utils/create-basic.js
@ -0,0 +1,18 @@
+/**
+ * Create a basic component with common options
+ */
+import '../locale';
+import i18n from '../mixins/i18n';
+
+const install = function(Vue) {
+  Vue.component(this.name, this);
+};
+
+export default function(sfc) {
+  sfc.name = 'van-' + sfc.name;
+  sfc.install = sfc.install || install;
+  sfc.mixins = sfc.mixins || [];
+  sfc.mixins.push(i18n);
+
+  return sfc;
+};
--- a/packages/utils/create.js
+++ b/packages/utils/create.js
@ -1,25 +1,18 @@
 /**
 * Create a component with common options
 */
-import '../locale';
-import i18n from '../mixins/i18n';
-import install from './install';
+import createBasic from './create-basic';
 import Icon from '../icon';
 import Loading from '../loading';
 import Cell from '../cell';
 import CellGroup from '../cell-group';

 export default function(sfc) {
-  sfc.name = 'van-' + sfc.name;
-  sfc.install = sfc.install || install;
-  sfc.mixins = sfc.mixins || [];
-  sfc.mixins.push(i18n);
  sfc.components = Object.assign(sfc.components || {}, {
    Icon,
    Loading,
    Cell,
    CellGroup
  });
-
-  return sfc;
+  return createBasic(sfc);
 };
--- a/packages/utils/install.js
+++ b/packages/utils/install.js
@ -1,6 +0,0 @@
-/**
- * Install function to register a component
- */
-export default function(Vue) {
-  Vue.component(this.name, this);
-}
--- a/packages/utils/node.js
+++ b/packages/utils/node.js
@ -1,3 +1,6 @@
+/**
+ * VNode helper
+ */
 export default {
  name: 'van-node',
  functional: true,
--- a/packages/vant-css/src/base.css
+++ b/packages/vant-css/src/base.css
@ -5,6 +5,7 @@
@import "./common/var.css";
@import "./common/normalize.css";
@import "./common/ellipsis.css";
+@import "./common/clearfix.css";
@import "./common/hairline.css";
@import "./common/animation.css";
@import './icon.css';
--- a/packages/vant-css/src/common/clearfix.css
+++ b/packages/vant-css/src/common/clearfix.css
@ -0,0 +1,5 @@
+@import '../mixins/clearfix.css';
+
+.van-clearfix {
+  @mixin ellipsis;
+}
--- a/packages/vant-css/src/sku.css
+++ b/packages/vant-css/src/sku.css
@ -3,10 +3,6 @@

 .van-sku {
  &-container {
-    background: $background-color;
-  }
-
-  &-layout {
    background: $white;
  }

@ -25,14 +21,6 @@
    padding: 12px 0 2px;
  }

-  &-row-group {
-    margin: 0 15px 10px 0;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
  /* sku header */
  &-header {
    margin-left: 15px;
@ -46,7 +34,7 @@
      background: $background-color;
      border-radius: 2px;

-      .van-sku__goods-img {
+      img {
        position: absolute;
        margin: auto;
        top: 0;
@ -87,19 +75,22 @@
  }

  &__close-icon {
+    top: 10px;
+    right: 15px;
+    font-size: 20px;
+    color: $gray-dark;
    position: absolute;
-    top: 0;
-    right: 0;
-    width: 44px;
-    height: 44px;
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAUVBMVEUAAACfn5+bm5uampqZmZmoqKiampqampqZmZmampqampqbm5ubm5uZmZmqqqqampqampqZmZmampqampqampqbm5ubm5uampqdnZ2ampqZmZkjZXmqAAAAGnRSTlMAFYBC5wm+rdPv1Ckl8wzZxKWicm9eUjoN8nSyS9UAAAFVSURBVDjLvZXbrsIgEEWhtAUU6M1a3f//oSeHWKfuVhv7IC+TkJVhz4UZ9bsThq5uYmzqbgifSV04LI4r9Fs0FRHw/WhCugUz9h6IRdpmryVgzfLGWKC8brEF0E58ObVAsUIrC1y2fFwAW9GdhTfb6oyHZQ3+/C7us39VcgXE79o3sIgylayXdZdpIaJVH08rQnTE9BmeEPXsWMK1rV6m01Xz/dO1g5H3nH6yNcoZNnCPPoOXTjplemYlnR4h2wG9YppZ1WPItsOomGZWjeiyrWEU08wqgzrbBkERfWJWBTTZRiTFNLMqIWZ7x43atQYa+lA33EmG5KyB0yyDApT8/uvWFCCnTvIrtKRuLgqzQktRpNzMCi3l5kaymZXqiGS3blGX2Zl2ftGi6+avqtcsUvN/8a2++LCHRsH+kDkwvg4Mxt2Re3yY85pIsiaOLKD91faz8wcoUxux/aS9awAAAABJRU5ErkJggg==);
-    background-size: 22px 22px;
-    background-repeat: no-repeat;
-    background-position: 7px 10px;
+    text-align: center;
  }

  /* sku row */
  &-row {
+    margin: 0 15px 10px 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
    &__title {
      font-size: 14px;
      padding-bottom: 10px;
@ -119,13 +110,13 @@
      border-radius: 3px;
      box-sizing: border-box;

-      &.van-sku-row__item--active {
+      &--active {
        color: $white;
        border-color: $red;
        background: $red;
      }

-      &.van-sku-row__item--disabled {
+      &--disabled {
        background: $active-color;
        border-color: $gray-light;
        color: $gray;
@ -147,8 +138,6 @@
  }

  &__stepper {
-    top: 7px;
-    left: 4px;
    float: right;

    &-title {
@ -172,6 +161,9 @@
  }

  &-messages {
+    padding-bottom: 10px;
+    background: $background-color;
+
    &__image-cell {
      .van-cell__title {
        width: 90px;
@ -187,7 +179,7 @@

    &__header {
      padding: 0 10px;
-      border: 1px solid #e5e5e5;
+      border: 1px solid $gray-light;
      line-height: 24px;
      border-radius: 3px;
      font-size: 12px;
@ -199,18 +191,13 @@
      }
    }

-    &__imglist {
-      @mixin clearfix;
-    }
-
-    &__img-container {
+    &__img {
      height: 60px;
      width: 60px;
-      margin-top: 10px;
-      margin-right: 10px;
      float: left;
+      margin: 10px 10px 0 0;
      position: relative;
-      border: #e5e5e5 1px solid;
+      border: $gray-light 1px solid;

      img {
        max-width: 100%;
@ -221,14 +208,19 @@
      }
    }

-    &__delete-picture {
+    &__delete {
      position: absolute;
      color: $red;
-      top: -10px;
-      right: -17px;
+      top: -12px;
+      right: -14px;
      z-index: 1;
-      width: 22px;
-      height: 22px;
+      padding: 6px;
+
+      &::before {
+        font-size: 14px;
+        border-radius: 14px;
+        background-color: $white;
+      }
    }

    &__uploading {
@ -246,6 +238,5 @@
  /* sku actions */
  &-actions {
    display: flex;
-    margin-top: 10px;
  }
 }
--- a/packages/vant-css/src/tree-select.css
+++ b/packages/vant-css/src/tree-select.css
@ -1,11 +1,8 @@
-@import "./mixins/ellipsis.css";
-@import "./mixins/clearfix.css";
@import './common/var.css';

 .van-tree-select {
  user-select: none;
  position: relative;
-  @mixin clearfix;

  &__nav {
    width: 143px;
--- a/test/specs/address-edit.spec.js
+++ b/test/specs/address-edit.spec.js
@ -262,7 +262,7 @@ describe('AddressEdit', () => {

    const deleteButton = wrapper.find('.van-button')[1];
    deleteButton.trigger('click');
-    wrapper.vm.onDeleteAddress();
+    wrapper.vm.onDelete();

    setTimeout(() => {
      wrapper.vm.isDeleting = false;
--- a/test/specs/sku.spec.js
+++ b/test/specs/sku.spec.js
@ -55,7 +55,7 @@ describe('Sku', (done) => {
        '.van-stepper__input': '1'
      },
      src: {
-        '.van-sku__goods-img': 'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'
+        '.van-sku-header__img-wrap img': 'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'
      }
    });

@ -69,7 +69,7 @@ describe('Sku', (done) => {
    wrapper.vm.$nextTick(() => {
      DOMChecker(wrapper, {
        src: {
-          '.van-sku__goods-img': 'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg'
+          '.van-sku-header__img-wrap img': 'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg'
        }
      });

@ -111,7 +111,7 @@ describe('Sku', (done) => {
      expect(buyCallback.calledOnce).to.be.false;

      // 选择完整规格时，未填留言时，弹出toast提示。
-      wrapper.find('.van-sku-row-group')[1].find('.van-sku-row__item')[0].trigger('click');
+      wrapper.find('.van-sku-row')[1].find('.van-sku-row__item')[0].trigger('click');
      buyBtn.trigger('click');
      wrapper.vm.$nextTick(() => {
        expect(toastText.textContent).to.equal('请填写留言1');