layUI框架下帶加減按鈕的數字輸入框

1.CSS部分： 將這幾行css代碼放到公共樣式文件

.plus-minus .layui-input-block{position: relative;}
.plus-minus input{position: absolute;top: 0px;left: 0px;text-align: center;}
.plus-minus button:nth-of-type(1){position: absolute;top: 0px;left: 0px;height: 100%;}
.plus-minus button:last-child{position: absolute;top: 0px;right: 0px;height: 100%;}

2.HTML部分： 直接在layUI的form表單輸入框代碼塊外套一層div，類名定義為“plus-minus”
input標簽增加data屬性：
data-step——點擊后增加減少的值，默認為1
data-maxvalue——最大值，默認為false，不限制最大值
data-minvalue——最小值，默認為false，不限制最小值

<div class="plus-minus">    
   <div class="layui-form-item">        
      <label class="layui-form-label">數量</label>        
      <div class="layui-input-block">            
         <input type="number" name="num" data-step="1" data- 
          maxvalue="20" data-minvalue="1" lay-verify="required" 
          autocomplete="off" class="layui-input num">        
     </div>    
   </div>
</div>

3.JS部分：將以下js代碼放到一個js文件中。

layui.define(['layer'], function (exports) {
    var $ = layui.$
    var obj = {
        //數字加減函數（基本參數對象，最大值返回函數，最小值返回函數）
        plusminus: function () {
            $(".plus-minus").each(function () {
                //定義按鈕HTML
                var plusminusbutton = 'button type="button" class="layui-btn layui-btn-sm layui-btn-normal vk-minus"><i class="fa fa-minus"></i></button>' + '<button type="button" class="layui-btn layui-btn-sm layui-btn-normal vk-plus"><i class="fa fa-plus"></i></button>'

                var data = new Object;
                data.step = $(this).find('input').data('step');
                data.maxvalue = $(this).find('input').data('maxvalue');
                data.minvalue = $(this).find('input').data('minvalue');

                //定義默認參數，合並參數
                options = $.extend({
                    step: 1, //每次點擊加減的值
                    maxvalue: false, //最大值，默認false，不限制
                    minvalue: false, //最小值，默認false，不限制
                }, data);

                var elem = $(this).find('input'),
                    step = parseInt(options.step),
                    maxvalue = options.maxvalue,
                    minvalue = options.minvalue;

                //參數不規范則返回
                if (elem == null || elem == undefined) {
                    return
                };
                if (step == 0 || step == undefined) {
                    return
                };
                //加入按鈕HTML
                $(elem).after(plusminusbutton);

                //點擊增加
                $(elem).parent().on("click", ".vk-plus", function () {
                    var nowinput = $(this).siblings("input"), //當前輸入框元素
                        nowbutton = $(this).siblings("button"), //當前按鈕元素
                        oldval = $(nowinput).val(), //點擊前的值
                        newval = parseInt(oldval) + step; //點擊后的值                    

                    if (newval < maxvalue && newval > minvalue) {
                        $(nowbutton).removeClass("layui-btn-disabled");
                    }
                    //判斷條件。是否最大值
                    if (maxvalue == false) {
                        $(nowinput).val(parseInt(oldval) + step);
                    }

                    if (maxvalue != 0 && newval < maxvalue) {
                        $(nowinput).val(parseInt(oldval) + step);
                    }

                    if (maxvalue != 0 && newval >= maxvalue) {
                        $(nowinput).val(maxvalue);
                        $(this).addClass("layui-btn-disabled");
                    }

                    //模擬change事件
                    $(nowinput).trigger('change');

                    return;
                });

                //點擊減少（同上）
                $(elem).parent().on("click", ".vk-minus", function () {
                    var nowinput = $(this).siblings("input"),
                        nowbutton = $(this).siblings("button"), //當前按鈕元素
                        oldval = $(elem).val(),
                        newval = parseInt(oldval) - step;

                    if (newval < maxvalue && newval > minvalue) {
                        $(nowbutton).removeClass("layui-btn-disabled");
                    }

                    if (minvalue == false) {
                        $(nowinput).val(parseInt(oldval) - step);
                    }

                    if (minvalue != 0 && newval > minvalue) {
                        $(nowinput).val(parseInt(oldval) - step);
                    }

                    if (minvalue != 0 && newval <= minvalue) {
                        $(nowinput).val(minvalue);
                        $(this).addClass("layui-btn-disabled");
                    }

                    //模擬change事件
                    $(nowinput).trigger('change');

                    return;
                });
            });
        }
    };
    exports('common', obj);
});

4.JS實例化使用

layui.extend({    
      common: '{/}/assets/js/common'  //改為上方代碼所在文件的路徑
}).use(['common'], function(){    
   var common = layui.common;    common.plusminus();
})

至此，數字加減模塊已經完成。動態添加的元素如果想綁定，只需要在添加完以后再重新使用該方法即可，即common.plusminus()。