add sku-header-price slot (youzan#705)

* [new feature] add sku-header-price slot
dankelop · Mar 16, 2018 · f9445ba · f9445ba
1 parent 4c195fd
commit f9445ba
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 15 deletions.
diff --git a/docs/demos/views/sku.vue b/docs/demos/views/sku.vue
@@ -59,6 +59,11 @@
           @buy-clicked="onBuyClicked"
           @add-cart="onAddCartClicked"
         >
+          <template slot="sku-header-price" slot-scope="props">
+            <div class="van-sku__goods-price">
+              <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span> only!!!
+            </div>
+          </template>
           <template slot="sku-actions" slot-scope="props">
             <div class="van-sku-actions">
               <van-button bottom-action @click="onPointClicked">{{ $t('button1') }}</van-button>

diff --git a/docs/markdown/en-US/sku.md b/docs/markdown/en-US/sku.md
@@ -64,6 +64,12 @@ Vue.use(Sku);
   @buy-clicked="onBuyClicked"
   @add-cart="onAddCartClicked"
 >
+  <!-- custom sku-header-price -->
+  <template slot="sku-header-price" slot-scope="props">
+    <div class="van-sku__goods-price">
+      <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span> only!!!
+    </div>
+  </template>
   <!-- custom sku actions -->
   <template slot="sku-actions" slot-scope="props">
     <div class="van-sku-actions">
@@ -114,6 +120,7 @@ Vue.use(Sku);
 | Name | Description | 
 |-----------|-----------|
 | sku-header | Custom header |
+| sku-header-price | Custom header price area |
 | sku-body-top | Custom content before sku-group |
 | sku-group | Custom sku |
 | extra-sku-group | Extra custom content |

diff --git a/docs/markdown/zh-CN/sku.md b/docs/markdown/zh-CN/sku.md
@@ -64,6 +64,12 @@ Vue.use(Sku);
   @buy-clicked="onBuyClicked"
   @add-cart="onAddCartClicked"
 >
+  <!-- 自定义 sku-header-price -->
+  <template slot="sku-header-price" slot-scope="props">
+    <div class="van-sku__goods-price">
+      <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span> only!!!
+    </div>
+  </template>
   <!-- 自定义 sku actions -->
   <template slot="sku-actions" slot-scope="props">
     <div class="van-sku-actions">
@@ -116,6 +122,7 @@ Sku 组件默认划分好了若干区块，这些区块都定义成了 slot，
 | 名称 | 说明 | 
 |-----------|-----------|
 | sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 |
+| sku-header-price | 自定义sku头部价格展示 |
 | sku-body-top | sku展示区上方的slot，无默认展示内容，按需使用 |
 | sku-group | 商品sku展示区 |
 | extra-sku-group | 额外商品sku展示区，一般用不到 |

diff --git a/packages/sku/Sku.vue b/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 || [];
     }

diff --git a/packages/sku/components/SkuHeader.vue b/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;
     }
   },