diff --git a/src/sku/README.md b/src/sku/README.md
index 5d0b9452c..a8e50f3ab 100644
--- a/src/sku/README.md
+++ b/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 |
diff --git a/src/sku/README.zh-CN.md b/src/sku/README.zh-CN.md
index d5e7512a8..e9e94efce 100644
--- a/src/sku/README.zh-CN.md
+++ b/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 展示区,一般用不到 |
diff --git a/src/sku/Sku.js b/src/sku/Sku.js
index b9f45bd0a..4f3e50918 100644
--- a/src/sku/Sku.js
+++ b/src/sku/Sku.js
@@ -621,6 +621,9 @@ export default createComponent({
skuEventBus={skuEventBus}
selectedSku={selectedSku}
>
+
+ {slots('sku-header-image-extra')}
+
{slots('sku-header-price') || (
¥
diff --git a/src/sku/components/SkuHeader.tsx b/src/sku/components/SkuHeader.tsx
index 1a08ed73f..95c5ccc53 100644
--- a/src/sku/components/SkuHeader.tsx
+++ b/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
) {
const { sku, goods, skuEventBus, selectedSku } = props;
@@ -55,6 +59,7 @@ function SkuHeader(

+ {slots['sku-header-image-extra']?.()}
{slots.default && slots.default()}
diff --git a/src/sku/demo/index.vue b/src/sku/demo/index.vue
index c7a1918d8..64d3dda29 100644
--- a/src/sku/demo/index.vue
+++ b/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',
},
},