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-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', }, },