Amount 计步器

简介

在购物商城中可常见到对商品数量+1和-1操作,我们将之定义为amount

使用方法

插件运行方式有两种:

  • ax*属性:对ax-amount标签使用axAmount属性即可按默认参数运行插件。
  • js实例:通过new axAmount('#ID')方式创建实例运行。

整体用ax-amount样式包裹,默认宽度是150px,减少按钮用decrease属性表示,增加按钮用increase属性表示。基本格式如下:

注意要将input放在增加和减少按钮的前方!

                        <div class="ax-amount" axAmount>
                            <input name="username" placeholder="数量" value="2" type="text">
                            <a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
                            <a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
                        </div>
                        
数量:

完全禁用

有两种方式使用完全禁用功能:

  • 1、对axAmount元素使用data-disabled="true"属性表示完全禁止。
  • 2、在new实例时,使用disabled参数。
完全禁止:
                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">完全禁止:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-amount" axAmount>
                                                        <input name="username" placeholder="数量" value="2" type="text" disabled>
                                                        <a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
                                                        <a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                    

禁用增加或减少

有两种方式使用禁止增加或减少功能:

  • 1、对axAmount元素使用data-increase="false"或data-decrease="false"表示单向禁止。
  • 2、在new实例时,使用increase和decrease参数。
数量:
                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">数量:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-amount" axAmount>
                                                        <input name="username" placeholder="数量" value="2" type="text">
                                                        <a href="###" decrease disabled><i class="ax-iconfont ax-icon-minus"></i></a>
                                                        <a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                        

自定义宽度

ax-amount元素写上style样式即可。

400px:
100%:
单位(个)
                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">400px:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-amount" axAmount style="width: 400px;">
                                                        <input name="username" placeholder="数量" value="2" type="text">
                                                        <a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
                                                        <a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-md"></div>

                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">100%:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-amount" axAmount style="width: 100%;">
                                                        <input name="username" placeholder="数量" value="2" type="text">
                                                        <a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
                                                        <a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                            <span class="ax-form-txt ax-color-ignore">单位(个)</span>
                                        </div>
                                    </div>
                            

其他布局

默认是左右布局,通过使用ax-array-leftax-array-right来重新排版。ax-amount ax-array-left表示按钮在左侧;ax-amount ax-array-right表示按钮在右侧。当然按钮的图标是可根据需要替换的。

按钮风格:
居右:
居右:
居左:
                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">按钮风格:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-amount" axAmount>
                                                        <input name="username" placeholder="数量" value="1" type="text">
                                                        <a href="###" decrease><i class="ax-iconfont ax-icon-left"></i></a>
                                                        <a href="###" increase><i class="ax-iconfont ax-icon-right"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-md"></div>

                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">居右:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-amount ax-array-right" axAmount>
                                                        <input name="username" placeholder="数量" value="1" type="text">
                                                        <a href="###" decrease><i class="ax-iconfont ax-icon-down"></i></a>
                                                        <a href="###" increase><i class="ax-iconfont ax-icon-up"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-md"></div>

                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">居右:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-amount ax-array-right" axAmount>
                                                        <input name="username" placeholder="数量" value="1" type="text">
                                                        <a href="###" decrease><i class="ax-iconfont ax-icon-triangle-down-f"></i></a>
                                                        <a href="###" increase><i class="ax-iconfont ax-icon-triangle-up-f"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-md"></div>

                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">居左:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-amount ax-array-left" axAmount>
                                                        <input name="username" placeholder="数量" value="1" type="text">
                                                        <a href="###" decrease><i class="ax-iconfont ax-icon-down"></i></a>
                                                        <a href="###" increase><i class="ax-iconfont ax-icon-up"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                

不同尺寸

本框架计步器支持四种尺寸,分别是ax-xs(高22px)、ax-sm(高28px)、ax-md(高38px默认)和ax-lg(高48px)。

特小尺寸:
小型尺寸:
中型尺寸:
大型尺寸:
                                    <div class="ax-form-group ax-xs">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">特小尺寸:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-amount ax-xs" axAmount>
                                                        <input name="username" placeholder="数量" value="1" type="text">
                                                        <a href="###" decrease><i class="ax-iconfont ax-icon-left"></i></a>
                                                        <a href="###" increase><i class="ax-iconfont ax-icon-right"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-md"></div>

                                    <div class="ax-form-group ax-sm">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">小型尺寸:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-amount ax-sm" axAmount>
                                                        <input name="username" placeholder="数量" value="1" type="text">
                                                        <a href="###" decrease><i class="ax-iconfont ax-icon-left"></i></a>
                                                        <a href="###" increase><i class="ax-iconfont ax-icon-right"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-md"></div>

                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">中型尺寸:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-amount" axAmount>
                                                        <input name="username" placeholder="数量" value="1" type="text">
                                                        <a href="###" decrease><i class="ax-iconfont ax-icon-left"></i></a>
                                                        <a href="###" increase><i class="ax-iconfont ax-icon-right"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-md"></div>

                                    <div class="ax-form-group ax-lg">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">大型尺寸:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-amount ax-lg" axAmount>
                                                        <input name="username" placeholder="数量" value="1" type="text">
                                                        <a href="###" decrease><i class="ax-iconfont ax-icon-left"></i></a>
                                                        <a href="###" increase><i class="ax-iconfont ax-icon-right"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    

限制范围

插件常用的参数是minmaxstep,即允许的最大值,允许的最小值和步进值,默认没有最大值和最小值,默认步进值是1。可根据情况需要设定不通的参数。

数量:
                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">数量:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-amount" axAmount data-min="2" data-max="12" data-step="2">
                                                        <input name="username" placeholder="数量" value="4" type="text">
                                                        <a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
                                                        <a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                        

默认格式

可通过rule参数设定默认规则,也就是设置默认的最小值、最大值、步进和小数位数。本插件内置了几个规则:

  • 货币currency:min = 0.00,max = null,step = 0.01,precision = 2
  • 品质quantity:min = 1,.max = 999,step = 1,precision = 0
  • 百分比percent:min = 0,.max = 100,step = 1,precision = 0
  • 月份month:min = 1,.max = 14,step = 1,precision = 0
  • 日期day:min = 1,.max = 31,step = 1,precision = 0
  • 小时hour:min = 0,.max = 24,step = 1,precision = 0
  • 分钟minute:min = 0,.max = 59,step = 1,precision = 0
  • 秒数second:min = 0,.max = 59,step = 1,precision = 0
货币:
品质:
月份:
                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">货币:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-amount" axAmount data-rule="currency">
                                                        <input name="username" placeholder="数量" value="4" type="text">
                                                        <a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
                                                        <a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-md"></div>

                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">品质:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-amount" axAmount data-rule="quantity">
                                                        <input name="username" placeholder="数量" value="4" type="text">
                                                        <a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
                                                        <a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-md"></div>

                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">月份:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-amount" axAmount data-rule="month">
                                                        <input name="username" placeholder="数量" value="4" type="text">
                                                        <a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
                                                        <a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            

使用cookie

设定cookie参数为当页唯一的值即可使用cookie,使用cookie后刷新页面值保持不变。

数量:
                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">数量:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-amount" axAmount data-cookie="cookie001">
                                                        <input name="username" placeholder="数量" value="2" type="text">
                                                        <a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
                                                        <a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                

摧毁实例

通过使用destroy方法更新摧毁实例,有回调函数但无参数。摧毁

数量:
  •                                         <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                    <div class="ax-form-label">数量:</div>
                                                    <div class="ax-form-con">
                                                        <div class="ax-form-input">
                                                            <div class="ax-amount" id="destroy">
                                                                <input name="username" placeholder="数量" value="2" type="text">
                                                                <a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
                                                                <a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
  •             let btnDestroy = document.querySelector('#btnDestroy');
                let instanceDestroy = new axAmount('#destroy');
                btnDestroy.onclick = function () {
                    instanceDestroy.destroy(function () {
                        alert('摧毁了!');
                    });
                }
                                            

更新参数

通过使用update方法更新插件参数。该方法有两个参数:

  • setting:将要更新的参数,格式:{name:value}
  • callback:回调函数,可不填

举例说明:更新min=0,max=20,step=2。更新

数量:
  •                                         <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                    <div class="ax-form-label">数量:</div>
                                                    <div class="ax-form-con">
                                                        <div class="ax-form-input">
                                                            <div class="ax-amount" id="update">
                                                                <input name="username" placeholder="数量" value="2" type="text">
                                                                <a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
                                                                <a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
  •                                             let btnUpdate = document.querySelector('#btnUpdate');
                                                let instanceUpdate = new axAmount('#update');
                                                btnUpdate.onclick = function () {
                                                    instanceUpdate.update({
                                                        min: 0,
                                                        max: 20,
                                                        step: 2,
                                                    }, function () {
                                                        alert('更新了!');
                                                    });
                                                }
                                            

监听事件

借鉴jQuery的写法,本插件有若干监听方法,基本写法是:instance.on('event',function(){});具体事件说明如下:

  • changed 点击后值改变执行,支持参数oldVal和newVal
  • mined 点击后达到最小值执行
  • maxed 点击后达到最大值执行

请用F12打开浏览器控制台查看监听结果。

数量:
  •                                         <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                    <div class="ax-form-label">数量:</div>
                                                    <div class="ax-form-con">
                                                        <div class="ax-form-input">
                                                            <div class="ax-amount" id="on">
                                                                <input name="username" placeholder="数量" value="2" type="text">
                                                                <a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
                                                                <a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
  •                                             let instanceOn = new axAmount('#on',{
                                                    min:0,
                                                    max:10,
                                                });
                                                instanceOn.on('changed',function(oldVal,newVal){
                                                    console.log('已经更新了,从'+oldVal+'变成了'+newVal);
                                                }).on('mined',function(){
                                                    console.log('已经到了最小值');
                                                }).on('maxed',function(){
                                                    console.log('已经到了最大值');
                                                });
                                            

参数选项

名称 说明 类型 默认值 data属性
value 设置默认值,默认为空,如果为空则自动使用input的值 number '' 支持
min 设置最小值,默认为空(可无限小) number '' 支持
max 设置最大值,默认为空(可无限大) number '' 支持
step 步进 number 1 支持
precision 设置小数点精确位数 number 0 支持
rule 步进格则,可填:currency|quantity|percent|month|day|hour|minute|second string '' 支持
disabled 设置是否禁止使用 boolean false 支持
increase 设置是否使用增加 boolean true 支持
decrease 设置是否使用减少 boolean true 支持
cookie 是否开启cookie,如果需要刷新页面保持原数值,请填写当页唯一的cookie名称 string '' 支持
document.addEventListener("DOMContentLoaded", function() {
      var demo1 = new axAmount({
        value: '',
        min: '',
        max: '',
        step: 1,
        precision: 0,
        rule: '',
        disabled: false,
        increase: true,
        decrease: true,
        cookie: '',
      });
});
                        

1、如果同时设置了index和cookie,那么会自动取消cookie设定。

2、本插件支持data-*属性方式使用参数。如果在插件元素上通过data-*属性方式使用参数,参数层级使用短横区分,比如要设置student:{name:'',school:''}中的name参数,那么在插件元素的data属性中应该这样书写:data-student-name="Lily"。

操作方法

名称 说明 参数说明 回调函数
init() 初始化 无参数 无回调函数
update(setting, callback) 更新所有参数 setting是用户自定义参数,是一个对象;callback是回调函数,可不填 function(){}
无参数
destroy(callback) 销毁实例 callback是回调函数,可不填 function(){}
无参数
on(type, handler) 添加监听事件 type是监听事件,事件类型可看前文的:监听方法;handler是回调函数 function(oldVal,newVal){}
oldVal:改变之前的值,可不填;newVal:改变之后的值,可不填
off(type, handler) 取消监听事件 type是监听事件,事件类型可看前文的:监听方法;handler是回调函数 function(){}
无参数
axInstance(axAmounts, name) 获取实例并重新设定参数 axAmounts是当页创建的所有实例;name是指插件元素axAmount属性的name值 无回调函数
在回调函数中this均指向实例本身,所以在回调函数中可默认使用如下变量:
  • this:实例本身
  • this.targetDom:实例的Dom
  • this.options:实例的参数