更新记录
1.0.4(2020-07-14)
优化样式代码
1.0.3(2020-07-14)
新增规格选项过多滚动显示
1.0.2(2020-05-22)
增加自定义属性,可手动配置combinations及specifications对应的属性。
查看更多
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
使用
import echoneSku from '@/components/echone-sku/echone-sku.vue'
export default {
components: {
echoneSku,
},
}
<echone-sku
:show="popupShow"
:theme-color="themeColor"
:combinations="combinations"
:specifications="specifications"
:default-select-index="selectedIndex"
:specifications-props="specificationsProps"
@close="handleClose"
@confirm="handleConfirm"
></echone-sku>
参数
参数 |
参数类型 |
描述 |
备注 |
show |
Boolean |
选择框显示和隐藏 |
必传 |
theme-color |
String |
选择框主题色 |
默认#1ac792 |
specifications |
Array |
商品规格数据 |
必传 |
combinations |
Array |
商品规格数据组合 |
必传 |
default-select-index |
Number |
默认商品规格数据组合的下标 |
默认 0 |
specifications-props |
Object |
自定义商品规格数据属性 |
默认属性名 id,list,name |
combinations-props |
Object |
自定义商品规格数据组合属性 |
默认属性名 id,value,image,price,stock |
@close |
Function |
关闭选择框回调 |
必传 |
@confirm |
Function |
确认商品规格回调 |
|
specifications
参数 |
参数类型 |
描述 |
备注 |
name |
String |
商品规格名称 |
必传 |
id |
String |
商品规格分类 id |
必传 |
value |
Array |
商品规格分类内容列表 |
必传 |
specifications: [
{
name: '发证机关',
id: '123',
list: ['成都市锦江区', '成都市青羊区'],
},
{
name: '教育年度',
id: '456',
list: ['2020年', '2019年'],
},
]
combinations
参数 |
参数类型 |
描述 |
备注 |
id |
String |
商品规格组合 id |
必传 |
value |
String |
商品规格组合值 |
必传 |
image |
String |
商品规格组合图片 |
必传 |
price |
Number |
商品规格组合价格 |
必传 |
stock |
Number |
商品规格组合库存 |
必传 |
combinations: [
{
id: '1',
value: '成都市锦江区,2020年',
image:
'https://miniprogram-img01.caishuib.com/wx15168444f005a4ab/material/image/202005135/3a014c2f42c1c46b.PNG',
price: 80.0,
stock: 1000,
},
{
id: '2',
value: '成都市锦江区,2019年',
image:
'https://miniprogram-img01.caishuib.com/wx15168444f005a4ab/material/image/20200383/ebd0c8d01a6e9c10.PNG',
price: 100.0,
stock: 500,
},
{
id: '3',
value: '成都市青羊区,2020年',
image:
'https://miniprogram-img01.caishuib.com/wx15168444f005a4ab/material/image/202005135/3a014c2f42c1c46b.PNG',
price: 80.0,
stock: 1000,
},
{
id: '4',
value: '成都市青羊区,2019年',
image:
'https://miniprogram-img01.caishuib.com/wx15168444f005a4ab/material/image/20200383/ebd0c8d01a6e9c10.PNG',
price: 100.0,
stock: 0,
},
]