kun-vue-sku v1.0.2

Kun-Vue-Sku

用Vue实现了sku选择

Demo

https://guosugaz.gitee.io/kun-vue-sku/

快速运行

1. 安装

npm install --save kun-vue-sku

import Vue from 'vue';
import VueSku from 'kun-vue-sku';

Vue.use(VueSku);

2. 使用

<VueSku 
   :specArr="specArr" 
   :defaultKey="defaultKey"
   storeKey="store"
   @get-goods="handleSelectGoods"
   @active-img="hanldeActiveImg"
/>

export default {
    data() {
        return {
            defaultKey: ["id", "price", "store"],
            specArr: [
                {
                    id: 1,
                    price: 99,
                    store: 9,
                    颜色:
                        "粉色,https://inews.gtimg.com/newsapp_ls/0/12169344339_295195/0",
                    尺码: "小",
                    内存: "4g",
                },
                {
                    id: 2,
                    price: 99,
                    store: 9,
                    颜色: "粉色",
                    尺码: "小",
                    内存: "8g",
                },
                {
                    id: 3,
                    price: 33,
                    store: 99,
                    颜色: "粉色",
                    尺码: "大",
                    内存: "4g",
                },
                {
                    id: 4,
                    price: 99,
                    store: 9,
                    颜色: "黄色",
                    尺码: "小",
                    内存: "4g",
                },
                {
                    id: 5,
                    price: 14,
                    store: 99,
                    颜色: "蓝色",
                    尺码: "大",
                    内存: "8g",
                }
            ]
        };
    },
    methods: {
        // 获取选中的商品
        handleSelectGoods(goods) {
            console.log(goods);
        },
        // 获取点击有图片的商品
        hanldeActiveImg(goods) {
            console.log(goods);
        }
    }
};

参数

callback