Geek-SKU 多商品sku组件支持v3、带图sku

如果您正在寻找一款支持v3、v2的多商品sku组件的话，那我想这款组件刚好可以满足各位的业务需求。

先来简单看一眼效果图:

一款轻量化、强大、拓展性强、可使用带图sku、可根据配置主题色自动生成相应的组件主题色的商品多规格sku，仅需要按照指定格式传入sku数组便可以直接使用。

Props

参数	说明	类型	默认值	可选值
data	源数据(sku列表)	Array	[]	-
value/modelValue	是否显示sku组件	Boolean	false	true
isMaskClose	是否可以点击遮罩层关闭	Boolean	false	true
isSelectMinPriceSku	是否默认选中最低价格的sku	Boolean	true	false
selectSkuIndex	默认选中的sku下标	Number	null	-
defaultCover	默认封面图，用于没有选中完整的sku时展示	String	‘’	-
defaultNum	默认购买商品数量	Number	1	-
themeColor	主题色，需要传入一个数组长度为3的数组，分别对应rgb三个颜色的值，例如: [84, 164, 255]	Array	[84, 164, 255]	-
btnConfirmText	确认按钮文字	String	‘确认’	-
notStockText	库存不足文字	String	‘库存不足’	-
notSelectSku	未选择完整的sku时的文字提示	String	‘请选择完整的sku属性’	-
isShowStock	是否展示库存	Boolean	true	false

Events

事件名	说明	回调参数
confirm	点击确认按钮时触发的事件	e = { sku, skuText , num }。分别对应选中的sku值 、sku属性名数组 、输入框内的数量。
skuChange	sku发生变化时出发的事件，如果有选中完整的sku则会返回该sku，否则会返回{}	e = {}
numChange	输入框内数量发生改变时触发事件	e = num, 返回输入框数量
close	关闭sku组件触发事件	-
open	打开sku组件触发事件	-

Methods

方法名	说明
resetNum	重置购买数量

更多详情可点击下方链接查看组件具体内容。

Geek-SKU官网