更新记录

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问