Sku 商品规格

商品规格弹层，支持规格联动、数量调整、不可售态与自定义底部操作

演示

9:41

代码示例

<re-sku :visible="baseVisible" :goods="goodsInfo" :sku="skuData" :btnOptions="baseButtons" @selectSku="selectSku" @close="onCloseBase" ></re-sku>
  <re-sku :visible="stepVisible" :goods="goodsInfo" :sku="skuData" :btnOptions="stepButtons" stepperTitle="购买数量" :stepperMin="2" :stepperMax="7" btnExtraText="抱歉，此商品在所选区域暂无存货" @selectSku="selectSku" @changeStepper="changeStepper" @clickBtnOperate="clickBtnOperate" @close="onCloseStep" ></re-sku>
  <re-sku :visible="notSellVisible" :goods="goodsInfo" :sku="skuData" :btnOptions="stepButtons" btnExtraText="抱歉，此商品在所选区域暂无存货" @selectSku="selectSku" @changeStepper="changeStepper" @clickBtnOperate="clickBtnOperate" @close="onCloseNotSell" ></re-sku>
  <re-sku ref="skuRef" :visible="resetVisible" :goods="goodsInfo" :sku="skuData" :btnOptions="baseButtons" @selectSku="handleReset" @close="onCloseReset" ></re-sku>

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-sku />。

API

Sku Props

名称	类型	默认值	描述	必传
visible	`boolean`	false	-	Y
goods	`UTSJSONObject`	{} as UTSJSONObject	-	Y
skuData	`Array<UTSJSONObject>`	as Array<UTSJSONObject>	-	Y
sku	`Array<UTSJSONObject>`	as Array<UTSJSONObject>	-	Y
customStyle	`string`	''	自定义样式	Y
btnOptions	`Array<string>`	'confirm' as Array<string>	-	N
btnExtraText	`string`	''	-	N
stepperTitle	`string`	''	-	N
stepperMax	`number`	99999	-	N
stepperMin	`number`	1	-	N
confirmText	`string`	''	-	N
buyText	`string`	''	-	N
addCartText	`string`	''	-	N

Sku Events

名称	参数	描述
select	data: UTSJSONObject	选择时触发
selectSku	data: UTSJSONObject	-
confirm	data: UTSJSONObject	确认时触发
close	-	关闭时触发
update:visible	value: boolean	显隐变化时触发
changeStepper	value: number	-
clickBtnOperate	value: UTSJSONObject	-
overLimit	value: string	-

Sku Slots

名称	描述
-	-

ShareSheet 分享面板

底部分享选择面板，支持单行滚动、分页展示和取消回调等分享场景

SubmitBar 提交订单栏

底部固定的订单提交栏，展示合计金额和提交按钮，支持优惠券选择入口

内容锚点

演示
代码示例
引入
API