Have ideas to improve npm?Join in the discussion! »

    kun-vue-sku

    1.0.2 • Public • Published

    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);
            }
        }
    };

    参数

    Param Type Describe default Version
    specArr Object[] 商品数组,每个item必须有id
    defaultKey String[] 非sku的字段,如id,price
    storeKey String 库存的字段 store

    callback

    Event Type Describe Version
    get-goods Function 获取到商品时回调
    active-img Function 点击带有图片的规格

    Keywords

    Install

    npm i kun-vue-sku

    DownloadsWeekly Downloads

    4

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    245 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar