SKU商品规格选择
在线demo地址
Github代码地址
可选属性实现思路
当用户点击某选项(如"黑色")时，拿到此时所有规格的选项( { color: "黑色" })
根据商品数据、用户当前选择规格，查找匹配商品。如果找到了，就返回商品标识(商品为数组则返回数组索引 index)；如果没找到，则返回 undefined 。(this.find(option))
拿到所有支持的商品的选项(如["iPhone X", "iPhone XS", "黑色", "64g"])，这些就是此时可点击的选项(要注意去重)。
可发现，同级的选项在商品的规格选项中不存在(如上面的例子中按道理来说"白色"选项也应该可点击)，所以要特殊处理这种情况。可通过遍历当前用户的所有规格选项，有值的(不为null)的规格改为其他选项再去求。(如 { color: "黑色" } 改为 { color: "白色" } 去求支持的商品的所有属于“颜色”这个规格的选项)
根据刚得到的结果来修改可被点击选项的状态，不包含的选项就是不可被点击的。
Goods 类的相关说明
生成实例需要传入商品对象数组
key: string 为 商品规格名称，value: [string] 为该商品此规格的值。如：
const goods = [
{
// "商品规格名称": "该商品此规格的值",
name: "iPhone X",
color: "黑色",
storage: "64g",
},
{
color: "黑色",
name: "iPhone XS",
storage: "64g",
},
{
color: "白色",
name: "iPhone X",
storage: "64g",
},
{
color: "白色",
name: "iPhone X",
storage: "256g",
},
];
this.list
返回商品实例的数据。
[
{
name: "iPhone X",
color: "黑色",
storage: "64g",
},
{
color: "黑色",
name: "iPhone XS",
storage: "64g",
},
{
color: "白色",
name: "iPhone X",
storage: "64g",
},
{
color: "白色",
name: "iPhone X",
storage: "256g",
},
];
this.attrKey
根据商品数据，可获得由所有商品的规格 key 组成的数组。
["name", "color", "storage"];
this.attr
根据商品数据，可获得商品全部属性选项对象。
{
"name": [
"iPhone X",
"iPhone XS"
],
"color": [
"黑色",
"白色"
],
"storage": [
"64g",
"256g"
]
}
this.have(option)
判断有没有这个规格 option 的商品，返回布尔值。
const goods = [
{
// "商品规格名称": "该商品此规格的值",
name: "iPhone X",
color: "黑色",
storage: &
