新增 input 数字输入组件

src/css/layui.css

@@ -781,6 +781,7 @@ a cite{font-style: normal; *cursor:pointer;}
 .layui-input-wrap .layui-input-prefix,
 .layui-input-wrap .layui-input-suffix,
 .layui-input-wrap .layui-input-split{pointer-events: none;}
+.layui-input-wrap .layui-input:hover + .layui-input-split{border-color: #d2d2d2;}
 .layui-input-wrap .layui-input:focus + .layui-input-split{border-color: #16b777;}
 .layui-input-wrap .layui-input-prefix.layui-input-split{border-width: 0; border-right-width: 1px;}
 
@@ -791,6 +792,17 @@ a cite{font-style: normal; *cursor:pointer;}
 .layui-input-affix .layui-icon-clear{color: rgba(0,0,0,.3);}
 .layui-input-affix .layui-icon:hover{color: rgba(0,0,0,.6);}
 
+/* 数字输入框动态点缀  */
+.layui-input-number{width: 24px; padding: 0;}
+.layui-input-number .layui-icon{position: absolute; right: 0; width: 100%; height: 50%; line-height: normal; font-size: 12px;}
+.layui-input-number .layui-icon:before{position: absolute; left: 50%; top: 50%; margin-top: -6px; margin-left: -6px;}
+.layui-input-number .layui-icon:first-child{top: 0; border-bottom: 1px solid #eee;}
+.layui-input-number .layui-icon:last-child{bottom: 0;}
+.layui-input-number .layui-icon:hover{font-weight: 700;}
+.layui-input-wrap .layui-input[type="number"]::-webkit-outer-spin-button,
+.layui-input-wrap .layui-input[type="number"]::-webkit-inner-spin-button{-webkit-appearance: none !important;}
+.layui-input-wrap .layui-input[type="number"]{-moz-appearance: textfield;}
+
 
 
 /* 下拉选择 */

src/modules/form.js

@@ -162,6 +162,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
         elemForm.find('input[lay-affix],textarea[lay-affix]').each(function(){
           var othis = $(this);
           var affix = othis.attr('lay-affix');
+          var CLASS_WRAP = 'layui-input-wrap';
           var CLASS_SUFFIX = 'layui-input-suffix';
           var CLASS_AFFIX = 'layui-input-affix';
           var disabled = othis.is('[disabled]') || othis.is('[readonly]');
@@ -179,17 +180,32 @@ layui.define(['lay', 'layer', 'util'], function(exports){
               value: affix
             }), opts, lay.options(othis[0]));
             var elemAffix = $('<div class="'+ CLASS_AFFIX +'">');
-            var elemIcon = $('<i class="layui-icon layui-icon-'+ opts.value + (
-              opts.disabled ? (' '+ DISABLED) : ''
-            ) +'"></i>');
+            var value = layui.isArray(opts.value) ? opts.value : [opts.value];
+            var elemIcon = $(function(){
+              var arr = [];
+              layui.each(value, function(i, item){
+                arr.push('<i class="layui-icon layui-icon-'+ item + (
+                  opts.disabled ? (' '+ DISABLED) : ''
+                ) +'"></i>');
+              });
+              return arr.join('');
+            }());
             
-            elemAffix.append(elemIcon);
+            elemAffix.append(elemIcon); // 插入图标元素
+
+            // 追加 className
             if(opts.split) elemAffix.addClass('layui-input-split');
+            if(opts.className) elemAffix.addClass(opts.className);
 
             // 移除旧的元素
             var hasElemAffix = othis.next('.'+ CLASS_AFFIX);
             if(hasElemAffix[0]) hasElemAffix.remove();
 
+            // 是否在规定的容器中
+            if(!othis.parent().hasClass(CLASS_WRAP)){
+              othis.wrap('<div class="'+ CLASS_WRAP +'"></div>');
+            }
+
             // 是否已经存在后缀元素
             var hasElemSuffix = othis.next('.'+ CLASS_SUFFIX);
             if(hasElemSuffix[0]){
@@ -256,6 +272,34 @@ layui.define(['lay', 'layer', 'util'], function(exports){
               },
               show: 'auto', // 根据输入框值是否存在来显示或隐藏点缀图标
               disabled: disabled // 跟随输入框禁用状态
+            },
+            number: { // 数字输入框
+              value: ['up', 'down'],
+              split: true,
+              className: 'layui-input-number',
+              click: function(elem){
+                var index = $(this).index();
+                var value = elem.val();
+                var step = Number(elem.attr('step')) || 1; // 加减的数字间隔
+                var min = Number(elem.attr('min'));
+                var max = Number(elem.attr('max'));
+
+                if(isNaN(value)) return; // 若非数字，则不作处理
+
+                value = Number(value);
+                value = index ? value - step : value + step;
+
+                // min max
+                if(value < min) value = min;
+                if(value > max) value = max;
+
+                // 保留位数
+                value = value.toFixed(function(step){
+                  return (step.match(/(?<=\.)[\d]+$/) || [''])[0].length;
+                }(step.toString()));
+
+                elem.val(value);
+              }
             }
           };