GG

# gg-specs 规格选择

gg-specs

规格选择组件，一般用于商品规格选择，默认为实心白色背景。

在 script 中引用组件

若使用uni-app的 easycom 引入方式，则无需在script中重复引用

import ggSpecs from '@/components/gg-specs/gg-specs.vue'
export default {
    components: {ggSpecs}
}
1
2
3
4

在 template 中使用组件

<gg-specs :specList="specList" :skuList="skuList" @change="change" />
1

script

export default {
  data() {
    return {
      specList: {
        "items": [
          { "name": "尺码", "items": [{ "name": "S" }, { "name": "M" }, { "name": "L" }, { "name": "XL" }] },
          { "name": "颜色", "items": [{ "name": "白色" }, { "name": "黑色" }, { "name": "灰色" }] },
          { "name": "款式", "items": [{ "name": "印花" }, { "name": "涂鸦" }, { "name": "无" }] }
        ],
      },
      skuList: {
        "items": [
          { "id": "19", "price": 200, "stock": 19, "sku": ["S", "黑色", "无"] },
          { "id": "21", "price": 300, "stock": 10, "sku": ["M", "红色", "印花"] },
          { "id": "23", "price": 500, "stock": 48, "sku": ["M", "白色", "印花"] },
          { "id": "20", "price": 300, "stock": 29, "sku": ["M", "灰色", "无"] },
          { "id": "22", "price": 300, "stock": 200, "sku": ["XL", "黑色", "无"] }
        ],
      }
    };
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 属性说明

属性名 类型 默认值 说明
specList Object - 规格
skuList Object - sku信息，库存价格等
disabledNumber Boolean false 是否禁止数量选择

# specList

属性名 类型 默认值 说明
items Array - 分组内容
name String - 分组名称
items Array - 规格内容
name String - 规格名称

# skuList

属性名 类型 默认值 说明
items Array - 分组内容
stock Number - 库存
sku Array - 规格搭配

# 事件说明

事件名 说明 返回值
change 选中内容发生变化时触发 data=change.e
属性名 类型 默认值 说明
number Number - 数量（ disabledNumber=true 不返回）
selectSpecs Array - 当前选中的规格
sku Object - 当前匹配到的sku，来自：skuList

# 插件预览地址

← 阅读协议 →