更新记录
1.0.4(2020-07-14) 下载此版本
优化样式代码
1.0.3(2020-07-14) 下载此版本
新增规格选项过多滚动显示
1.0.2(2020-05-22) 下载此版本
增加自定义属性,可手动配置combinations及specifications对应的属性。
查看更多平台兼容性
使用
- 引入组件
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,
},
]