diff --git a/src/css/layui.css b/src/css/layui.css index b0ff68a8..70378482 100644 --- a/src/css/layui.css +++ b/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;} + /* 下拉选择 */ diff --git a/src/modules/form.js b/src/modules/form.js index 38e44887..7e774a8e 100644 --- a/src/modules/form.js +++ b/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 = $('
'); - var elemIcon = $(''); + var value = layui.isArray(opts.value) ? opts.value : [opts.value]; + var elemIcon = $(function(){ + var arr = []; + layui.each(value, function(i, item){ + arr.push(''); + }); + 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('
'); + } + // 是否已经存在后缀元素 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); + } } };