add sku-header-price slot (#705)

* [new feature] add sku-header-price slot

packages/sku/Sku.vue

@@ -17,10 +17,19 @@
       <sku-header
         :sku-event-bus="skuEventBus"
         :selected-sku="selectedSku"
-        :selected-sku-comb="selectedSkuComb"
         :goods="goods"
         :sku="sku"
-      />
+      >
+        <slot
+          name="sku-header-price"
+          :price="price"
+          :selected-sku-comb="selectedSkuComb"
+        >
+          <div class="van-sku__goods-price">
+            <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ price }}</span>
+          </div>
+        </slot>
+      </sku-header>
     </slot>
     <div class="van-sku-body" :style="bodyStyle">
       <!-- sku-body-top -->
@@ -251,6 +260,14 @@ export default create({
       return null;
     },
 
+    price() {
+      if (this.selectedSkuComb) {
+        return (this.selectedSkuComb.price / 100).toFixed(2);
+      }
+      // sku.price是一个格式化好的价格区间
+      return this.sku.price;
+    },
+
     skuTree() {
       return this.sku.tree || [];
     }

packages/sku/components/SkuHeader.vue

@@ -5,9 +5,8 @@
     </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>
+      <!-- price display area -->
+      <slot />
       <icon name="close" class="van-sku__close-icon" @click="skuEventBus.$emit('sku:close')" />
     </div>
   </div>
@@ -23,8 +22,7 @@ export default create({
     sku: Object,
     goods: Object,
     skuEventBus: Object,
-    selectedSku: Object,
-    selectedSkuComb: Object
+    selectedSku: Object
   },
 
   computed: {
@@ -33,14 +31,6 @@ export default create({
       const skuImg = this.getSkuImg(s1Id);
       // 优先使用选中sku的图片
       return skuImg || this.goods.picture;
-    },
-
-    price() {
-      if (this.selectedSkuComb) {
-        return (this.selectedSkuComb.price / 100).toFixed(2);
-      }
-      // sku.price是一个格式化好的价格区间
-      return this.sku.price;
     }
   },