[Improvement] Sku: optimize DOM (#704)

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: () => {
+        uploadImg: (file, img) => {
-          return new Promise((resolve) => {
+          return new Promise(resolve => {
-            setTimeout(() => resolve('https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
+            setTimeout(() => resolve(img), 1000);
           });
         },
         uploadMaxSize: 3

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;
       }

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>

packages/cell-group/index.vue

@@ -5,11 +5,9 @@
 </template>
 
 <script>
-import install from '../utils/install';
+import create from '../utils/create-basic';
-
-export default {
-  install,
 
+export default create({
   name: 'cell-group',
 
   props: {
@@ -18,5 +16,5 @@ export default {
       default: true
     }
   }
-};
+});
 </script>

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 {
+export default create({
-  install,
-
   name: 'cell',
 
   components: {
@@ -72,5 +70,5 @@ export default {
       this.routerLink();
     }
   }
-};
+});
 </script>

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>

packages/icon/index.vue

@@ -6,16 +6,14 @@
 </template>
 
 <script>
-import install from '../utils/install';
+import create from '../utils/create-basic';
-
-export default {
-  install,
 
+export default create({
   name: 'icon',
 
   props: {
     name: String,
     info: String
   }
-};
+});
 </script>

packages/loading/index.vue

@@ -10,11 +10,9 @@
 </template>
 
 <script>
-import install from '../utils/install';
+import create from '../utils/create-basic';
-
-export default {
-  install,
 
+export default create({
   name: 'loading',
 
   props: {
@@ -37,5 +35,5 @@ export default {
       } : {};
     }
   }
-};
+});
 </script>

packages/sku/Sku.vue

@@ -3,11 +3,10 @@
     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"
@@ -29,12 +28,9 @@
       <!-- 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"
+            v-for="(skuTreeItem, index) in skuTree"
+            :key="index"
             :sku-row="skuTreeItem"
           >
             <sku-row-item
@@ -48,7 +44,6 @@
             />
           </sku-row>
         </div>
-            </div>
       </slot>
       <!-- extra-sku-group -->
       <slot name="extra-sku-group" :sku-event-bus="skuEventBus"/>
@@ -93,8 +88,6 @@
         :show-add-cart-btn="showAddCartBtn"
       />
     </slot>
-      </div>
-    </div>
   </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:close', this.onClose);
-    skuEventBus.$on('sku:select', this.onSkuSelected);
+    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:addCart', this.onAddCart);
-    skuEventBus.$on('sku:buy', this.onBuyClicked);
+    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();
+        return this.validateSkuMessages();
-        // sku留言没有错误则校验通过
-        return error;
-      } else {
-        return this.$t('spec');
       }
+
+      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');
     },
 

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>
+      <div class="van-sku__goods-price">
-      <span class="van-sku__close-icon" @click="skuEventBus.$emit('sku:close')" />
+        <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,
+    selectedSkuComb: Object
-    goods: 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);

packages/sku/components/SkuImgUploader.vue

@@ -2,56 +2,51 @@
   <div class="van-sku-img-uploader">
     <!-- 头部 -->
     <van-uploader
-      :disabled="!canUpload"
+      :disabled="!!paddingImg"
-      :before-read="beforeReadFile"
       :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" />
+          <icon name="photograph" />
-          <span class="label">{{ getPhotoText(value) }}</span> {{ $t('or') }}
+          <span class="label">{{ $t(value ? 'rephoto' : 'photo') }}</span> {{ $t('or') }}
-          <van-icon name="photo" />
+          <icon name="photo" />
-          <span class="label">{{ getPicText(value) }}</span>
+          <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">
+        class="van-sku-img-uploader__img"
-        <span class="van-sku-img-uploader__delete-picture" @click="deleteImg(index)">
+      >
-          <van-icon name="clear" />
-        </span>
         <img :src="img">
+        <icon name="clear" class="van-sku-img-uploader__delete" @click="$emit('input', '')" />
       </div>
       <!-- 正在上传的图片,有上传等待提示 -->
-      <div
+      <div v-if="paddingImg" class="van-sku-img-uploader__img">
-        v-if="paddingImg"
-        class="van-sku-img-uploader__img-container">
         <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 VanUploader from '../../uploader';
-import Uploader from '../../uploader';
-import Loading from '../../loading';
 import { create } from '../../utils';
 
 export default create({
   name: 'sku-img-uploader',
 
   components: {
-    'van-uploader': Uploader,
+    VanUploader
-    'van-icon': Icon,
-    'van-loading': Loading
   },
 
   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.uploadImg(file.file, file.content).then(img => {
-        this.updateImg(img);
+        this.$emit('input', img);
         this.$nextTick(() => {
           this.paddingImg = '';
         });
       }).catch(() => {
         this.paddingImg = '';
       });
-    },
-    deleteImg() {
-      this.$emit('input', '');
-    },
-    updateImg(img) {
-      this.$emit('input', img);
     }
   }
 });

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';

packages/sku/components/SkuRow.vue

@@ -1,10 +1,8 @@
 <template>
   <div class="van-sku-row">
     <div class="van-sku-row__title">{{ skuRow.k }}：</div>
-    <div class="van-sku-row__items">
     <slot />
   </div>
-  </div>
 </template>
 
 <script>

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,

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);

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;

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;
+};

packages/utils/create.js

@@ -1,25 +1,18 @@
 /**
  * Create a component with common options
  */
-import '../locale';
+import createBasic from './create-basic';
-import i18n from '../mixins/i18n';
-import install from './install';
 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 createBasic(sfc);
-  return sfc;
 };

packages/utils/install.js

@@ -1,6 +0,0 @@
-/**
- * Install function to register a component
- */
-export default function(Vue) {
-  Vue.component(this.name, this);
-}

packages/utils/node.js

@@ -1,3 +1,6 @@
+/**
+ * VNode helper
+ */
 export default {
   name: 'van-node',
   functional: true,

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';

packages/vant-css/src/common/clearfix.css

@@ -0,0 +1,5 @@
+@import '../mixins/clearfix.css';
+
+.van-clearfix {
+  @mixin ellipsis;
+}

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;
+    text-align: center;
-    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;
   }
 
   /* 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 {
+    &__img {
-      @mixin clearfix;
-    }
-
-    &__img-container {
       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;
+      top: -12px;
-      right: -17px;
+      right: -14px;
       z-index: 1;
-      width: 22px;
+      padding: 6px;
-      height: 22px;
+
+      &::before {
+        font-size: 14px;
+        border-radius: 14px;
+        background-color: $white;
+      }
     }
 
     &__uploading {
@@ -246,6 +238,5 @@
   /* sku actions */
   &-actions {
     display: flex;
-    margin-top: 10px;
   }
 }

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;

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;

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');