goods-attr

特性介绍

• 基于质数的特性开发，实现原理简单
• 支持 IE9(含) 以上浏览器，0 依赖
• 各属性名称支持自定义
• 聚合成功后支持当前页面异步处理，也支持跳转处理

使用

安装： ES6 方式

    npm i goods-attr -S
        

    import GoodsAttr from 'goods-attr';
        

安装： CDN 方式

    <script src="https://cdn.jsdelivr.net/npm/goods-attr"></script>
        

HTML

    <div id="box">
        <div class="row">
            <label class="row-label">颜色：</label>
            <div class="row-list">
                <a href="javascript:;" class="item" data-p="2">蓝</a>
                <a href="javascript:;" class="item active" data-p="3">橙</a>
                <a href="javascript:;" class="item" data-p="5">粉</a>
            </div>
        </div>
        <div class="row">
            <label class="row-label">尺码：</label>
            <div class="row-list">
                <a href="javascript:;" class="item active" data-p="7">M</a>
                <a href="javascript:;" class="item" data-p="11">L</a>
            </div>
        </div>
    </div>
        

CSS

    .row{ display: table; margin: 15px 0; }
    .row-label{ display: inline-block; vertical-align: top; padding-top: 5px; min-width: 80px; font-size: 14px; }
    .row-list{ display: table-cell; vertical-align: top; font-size: 0; }

    /* 以下这些很有必要 */
    .item{ display: inline-block; padding: 5px 20px; margin-bottom: 10px; margin-right: 10px; border: 1px solid #bbb; text-decoration: none; font-size: 14px; color: #212121; }
    .item:hover, .item.active{ border-color: #f30240; color: #f30240; }
    .item.active{ cursor: default; }
    .item.disabled{ color: #ccc; border-color: #ddd; cursor: default;}
        

JS

    // sku 可聚合数据，这个一般由后端生成
    var goodsLink = [
        {
            prime: 14,
            sku: '10001',
            img: './imgs/t-blue.png',
            title: '蓝色 T 恤 - M 码',
            price: 69.00
        },
        {
            prime: 22,
            sku: '10002',
            img: './imgs/t-blue.png',
            title: '蓝色 T 恤 - L 码',
            price: 72.00
        },
        {
            prime: 21,
            sku: '10003',
            img: './imgs/t-orange.png',
            title: '橙色 T 恤 - M 码',
            price: 69.00
        },
        {
            prime: 33,
            sku: '10004',
            img: './imgs/t-orange.png',
            title: '橙色 T 恤 - L 码',
            price: 72.00
        },
        {
            prime: 35,
            sku: '10005',
            img: './imgs/t-pink.png',
            title: '粉色 T 恤 - M 码',
            price: 75.00
        },
        {
            prime: 55,
            sku: '10006',
            img: './imgs/t-pink.png',
            title: '粉色 T 恤 - L 码',
            price: 78.00
        }
    ];

    // 调用
    new GoodsAttr(document.querySelector('#box'), {
        matchList: goodsLink,
        matchAttr: 'prime',
        rowCls: 'row',
        itemCls: 'item',
        itemActiveCls: 'active',
        itemPrimeAttr: 'data-p',
        success(data) {
            this.el.querySelector('.result-img').setAttribute('src', data.img);
            this.el.querySelector('.result-title').innerHTML = data.title;
            this.el.querySelector('.result-price').innerHTML = '￥' + data.price;
        }
    });