基于vue实现sku商品选择

这是个人在理解sku思路后，参考淘宝用vue来实现的，有更好的方式，大家提醒一下。

组件设计：

关于sku商品选择的实现思路，大家可以看看：sku商品选择实现思路

组件变量设置：

变量设置前大家一定要确定sku的数据结构：这是我个人的，仅供参考。

 skuInfo:{
              // 默认商品 sku 缩略图
              "picture": 'http://s11.mogucdn.com/mlcdn/c45406/180822_3j9j174g9laj1h7a1ii4786jgghb1_640x960.jpg',
              "productId":"",
              "defaultPrice": "68.00~98.00",
              "priceRange": "68.00~98.00",
              "totalStock": 11117,
              "skus": [
                  {
                      "skuId": "3840845646137",
                      "price": 100, // 价格（单位分）
                      "stock_num": 110, // 当前 sku 组合对应的库存
                      "img":"//s11.mogucdn.com/mlcdn/c45406/180822_3j9j174g9laj1h7a1ii4786jgghb1_640x960.jpg",
                      "propPath": "20549:672896046;1627207:3861844"
                  },
                  {
                      "skuId": "3840845646082",
                      "price": 100, // 价格（单位分）
                      "stock_num": 110, // 当前 sku 组合对应的库存
                      "img":"//s11.mogucdn.com/mlcdn/c45406/180822_3j9j174g9laj1h7a1ii4786jgghb1_640x960.jpg",
                      "propPath": "20549:152524919;1627207:3861844"
                  },
                  {
                      "skuId": "3840845646087",
                      "price": 100, // 价格（单位分）
                      "stock_num": 110, // 当前 sku 组合对应的库存
                      "img":"//s11.mogucdn.com/mlcdn/c45406/180822_3j9j174g9laj1h7a1ii4786jgghb1_640x960.jpg",
                      "propPath": "20549:155046983;1627207:3861844"
                  },
                
                  {
                      "skuId": "3840845646139",
                      "price": 100, // 价格（单位分）
                      "stock_num": 110, // 当前 sku 组合对应的库存
                      "img":"//s5.mogucdn.com/mlcdn/c45406/180822_6fj224cck2aj4j7e52ebfj09hd01l_640x960.jpg",

                      "propPath": "20549:672896046;1627207:570490570"
                  }
              ],
              "props": [
                  {
                      "pid": "20549",
                      "name": "尺码",
                      "values": [
                        
                          {
                              "vid": "147478970",
                              "name": "34 内长21.8CM"
                          },
                          {
                              "vid": "296172561",
                              "name": "35 内长22.5CM"
                          },
                          {
                              "vid": "59280855",
                              "name": "36 内长23.2CM"
                          },
                          {
                              "vid": "72380707",
                              "name": "37 内长23.9CM"
                          },
                          {
                              "vid": "103189693",
                              "name": "38 内长24.6CM"
                          }
                      ]
                  },
                  {
                      "pid": "1627207",
                      "name": "颜色分类",
                      "values": [
                          {
                              "vid": "3861844",
                              "name": "海军蓝",
                              "image": "//img.alicdn.com/imgextra/i4/676005100/TB2o.vtketTMeFjSZFOXXaTiVXa_!!676005100.jpg"
                          },
                          {
                              "vid": "9848769",
                              "name": "彩兰",
                              "image": "//img.alicdn.com/imgextra/i3/676005100/TB2pIXPpNxmpuFjSZFNXXXrRXXa_!!676005100.jpg"
                          },
                          {
                              "vid": "454946651",
                              "name": "灰色/浅蓝色",
                              "image": "//img.alicdn.com/imgextra/i3/676005100/TB2AmMymYBkpuFjy1zkXXbSpFXa_!!676005100.jpg"
                          },
                          {
                              "vid": "3334600",
                              "name": "玫红",
                              "image": "//img.alicdn.com/imgextra/i4/676005100/TB22EANm80kpuFjSsziXXa.oVXa_!!676005100.jpg"
                          },
                          {
                              "vid": "570490570",
                              "name": "桃红（粉色）",
                              "image": "//img.alicdn.com/imgextra/i2/676005100/TB2WbibpH4npuFjSZFmXXXl4FXa_!!676005100.jpg"
                          }
                      ]
                  }
              ]
          },

 

具体代码，我就不上传了大家可以去git上看看：https://github.com/jamesenter/ghmall