feat(Sku): add sku-header-image-extra slot (#5696)

src/sku/README.md

@@ -174,6 +174,7 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Sku instance and call instance m
 | sku-header-price | Custom header price area |
 | sku-header-origin-price | Custom header origin price area |
 | sku-header-extra | Extra header area |
+| sku-header-image-extra  | Custom header image extra area |
 | sku-body-top | Custom content before sku-group |
 | sku-group | Custom sku |
 | extra-sku-group | Extra custom content |

src/sku/README.zh-CN.md

@@ -180,6 +180,7 @@ Sku 组件默认划分好了若干区块，这些区块都定义成了插槽，
 | sku-header-price | 自定义 sku 头部价格展示 |
 | sku-header-origin-price | 自定义 sku 头部原价展示 |
 | sku-header-extra | 额外 sku 头部区域 |
+| sku-header-image-extra | 自定义 sku 头部图片额外的展示 |
 | sku-body-top |  sku 展示区上方的内容，无默认展示内容，按需使用 |
 | sku-group | 商品 sku 展示区 |
 | extra-sku-group | 额外商品 sku 展示区，一般用不到 |

src/sku/Sku.js

@@ -621,6 +621,9 @@ export default createComponent({
         skuEventBus={skuEventBus}
         selectedSku={selectedSku}
       >
+        <template slot="sku-header-image-extra">
+          {slots('sku-header-image-extra')}
+        </template>
         {slots('sku-header-price') || (
           <div class="van-sku__goods-price">
             <span class="van-sku__price-symbol">￥</span>

src/sku/components/SkuHeader.tsx

@@ -5,7 +5,7 @@ import { BORDER_BOTTOM } from '../../utils/constant';
 
 // Types
 import Vue, { CreateElement, RenderContext } from 'vue/types';
-import { DefaultSlots } from '../../utils/types';
+import { DefaultSlots, ScopedSlot } from '../../utils/types';
 import { SkuData, SkuGoodsData, SelectedSkuData } from '../../../types/sku';
 
 export type SkuHeaderProps = {
@@ -15,6 +15,10 @@ export type SkuHeaderProps = {
   selectedSku: SelectedSkuData;
 };
 
+export type SkuHeaderSlots = DefaultSlots & {
+  'sku-header-image-extra'?: ScopedSlot;
+};
+
 const [createComponent, bem] = createNamespace('sku-header');
 
 function getSkuImg(
@@ -41,7 +45,7 @@ function getSkuImg(
 function SkuHeader(
   h: CreateElement,
   props: SkuHeaderProps,
-  slots: DefaultSlots,
+  slots: SkuHeaderSlots,
   ctx: RenderContext<SkuHeaderProps>
 ) {
   const { sku, goods, skuEventBus, selectedSku } = props;
@@ -55,6 +59,7 @@ function SkuHeader(
     <div class={[bem(), BORDER_BOTTOM]} {...inherit(ctx)}>
       <div class={bem('img-wrap')} onClick={previewImage}>
         <img src={goodsImg} />
+        {slots['sku-header-image-extra']?.()}
       </div>
       <div class={bem('goods-info')}>{slots.default && slots.default()}</div>
     </div>

src/sku/demo/index.vue

@@ -163,7 +163,7 @@ export default {
       stepperTitle: 'Stepper title',
       button1: 'Button',
       button2: 'Button',
-      actionsTop: 'action top info',
+      actionsTop: 'Action top info',
     },
   },