layUI框架下带加减按钮的数字输入框

思路：打开layUI的文档后，开头部分就写了支持扩展自定义模块，并且内置的其他模块也都可以使用。这样对于这个扩展来说就不需要从头写起了。在原本的输入框代码中加入两个按钮，然后给两个按钮绑定click事件，再判断每次点击后的值是否符合条件，这样加减输入框就完整了。

效果图

使用方法：

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()。

希望这篇文章可以帮助到更多的朋友。

以上就是layUI框架下带加减按钮的数字输入框的详细内容，更多内容请关注技术你好其它相关文章！