From cfd6f0cb5fbf56662ba811612d5a8514b8a5f7dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Fri, 29 Jul 2022 10:24:21 +0800 Subject: [PATCH 01/13] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20select=20=E4=B8=AD?= =?UTF-8?q?=20option=20=E5=86=85=E5=AE=B9=E5=87=BA=E7=8E=B0=E5=8F=8C?= =?UTF-8?q?=E5=BC=95=E5=8F=B7=E6=97=B6=E7=9A=84=E5=BC=82=E5=B8=B8=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/form.js | 240 ++++++++++++++++++++++---------------------- 1 file changed, 120 insertions(+), 120 deletions(-) diff --git a/src/modules/form.js b/src/modules/form.js index 8b1170bf..0f0260fd 100644 --- a/src/modules/form.js +++ b/src/modules/form.js @@ -1,20 +1,20 @@ /** * form 表单组件 - * MIT Licensed */ -layui.define('layer', function(exports){ +layui.define(['layer', 'util'], function(exports){ "use strict"; - var $ = layui.$ - ,layer = layui.layer - ,hint = layui.hint() - ,device = layui.device() + var $ = layui.$; + var layer = layui.layer; + var util = layui.util; + var hint = layui.hint(); + var device = layui.device(); - ,MOD_NAME = 'form', ELEM = '.layui-form', THIS = 'layui-this' - ,SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled' + var MOD_NAME = 'form', ELEM = '.layui-form', THIS = 'layui-this'; + var SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled'; - ,Form = function(){ + var Form = function(){ this.config = { verify: { required: [ @@ -45,64 +45,64 @@ layui.define('layer', function(exports){ ,'请输入正确的身份证号' ] } - ,autocomplete: null //全局 autocomplete 状态。null 表示不干预 + ,autocomplete: null // 全局 autocomplete 状态。null 表示不干预 }; }; - //全局设置 + // 全局设置 Form.prototype.set = function(options){ var that = this; $.extend(true, that.config, options); return that; }; - //验证规则设定 + // 验证规则设定 Form.prototype.verify = function(settings){ var that = this; $.extend(true, that.config.verify, settings); return that; }; - //获取指定表单对象 + // 获取指定表单对象 Form.prototype.getFormElem = function(filter){ return $(ELEM + function(){ return filter ? ('[lay-filter="' + filter +'"]') : ''; }()); }; - //表单事件 + // 表单事件 Form.prototype.on = function(events, callback){ return layui.onevent.call(this, MOD_NAME, events, callback); }; - //赋值/取值 + // 赋值/取值 Form.prototype.val = function(filter, object){ var that = this ,formElem = that.getFormElem(filter); - //遍历 + // 遍历 formElem.each(function(index, item){ var itemForm = $(this); - //赋值 + // 赋值 layui.each(object, function(key, value){ var itemElem = itemForm.find('[name="'+ key +'"]') ,type; - //如果对应的表单不存在,则不执行 + // 如果对应的表单不存在,则不执行 if(!itemElem[0]) return; type = itemElem[0].type; - //如果为复选框 + // 如果为复选框 if(type === 'checkbox'){ itemElem[0].checked = value; - } else if(type === 'radio') { //如果为单选框 + } else if(type === 'radio') { // 如果为单选框 itemElem.each(function(){ if(this.value == value ){ this.checked = true } }); - } else { //其它类型的表单 + } else { // 其它类型的表单 itemElem.val(value); } }); @@ -110,40 +110,40 @@ layui.define('layer', function(exports){ form.render(null, filter); - //返回值 + // 返回值 return that.getValue(filter); }; - //取值 + // 取值 Form.prototype.getValue = function(filter, itemForm){ itemForm = itemForm || this.getFormElem(filter); - var nameIndex = {} //数组 name 索引 + var nameIndex = {} // 数组 name 索引 ,field = {} - ,fieldElem = itemForm.find('input,select,textarea') //获取所有表单域 + ,fieldElem = itemForm.find('input,select,textarea') // 获取所有表单域 layui.each(fieldElem, function(_, item){ var othis = $(this) - ,init_name; //初始 name + ,init_name; // 初始 name item.name = (item.name || '').replace(/^\s*|\s*&/, ''); if(!item.name) return; - //用于支持数组 name + // 用于支持数组 name if(/^.*\[\]$/.test(item.name)){ var key = item.name.match(/^(.*)\[\]$/g)[0]; nameIndex[key] = nameIndex[key] | 0; init_name = item.name.replace(/^(.*)\[\]$/, '$1['+ (nameIndex[key]++) +']'); } - if(/^checkbox|radio$/.test(item.type) && !item.checked) return; //复选框和单选框未选中,不记录字段 + if(/^checkbox|radio$/.test(item.type) && !item.checked) return; // 复选框和单选框未选中,不记录字段 field[init_name || item.name] = item.value; }); return field; }; - //表单控件渲染 + // 表单控件渲染 Form.prototype.render = function(type, filter){ var that = this ,options = that.config @@ -151,21 +151,21 @@ layui.define('layer', function(exports){ return filter ? ('[lay-filter="' + filter +'"]') : ''; }()) ,items = { - //输入框 + // 输入框 input: function(elem){ var inputs = elem || elemForm.find('input,textarea'); - //初始化全局的 autocomplete + // 初始化全局的 autocomplete options.autocomplete && inputs.attr('autocomplete', options.autocomplete); } - //下拉选择框 + // 下拉选择框 ,select: function(elem){ var TIPS = '请选择', CLASS = 'layui-form-select', TITLE = 'layui-select-title' ,NONE = 'layui-select-none', initValue = '', thatInput ,selects = elem || elemForm.find('select') - //隐藏 select + // 隐藏 select ,hide = function(e, clear){ if(!$(e.target).parent().hasClass(TITLE) || clear){ $('.'+CLASS).removeClass(CLASS+'ed ' + CLASS+'up'); @@ -174,7 +174,7 @@ layui.define('layer', function(exports){ thatInput = null; } - //各种事件 + // 各种事件 ,events = function(reElem, disabled, isSearch){ var select = $(this) ,title = reElem.find('.' + TITLE) @@ -182,29 +182,29 @@ layui.define('layer', function(exports){ ,dl = reElem.find('dl') ,dds = dl.children('dd') ,dts = dl.children('dt') // select分组dt元素 - ,index = this.selectedIndex //当前选中的索引 - ,nearElem; //select 组件当前选中的附近元素,用于辅助快捷键功能 + ,index = this.selectedIndex // 当前选中的索引 + ,nearElem; // select 组件当前选中的附近元素,用于辅助快捷键功能 if(disabled) return; // 搜索项 var laySearch = select.attr('lay-search'); - //展开下拉 + // 展开下拉 var showDown = function(){ var top = reElem.offset().top + reElem.outerHeight() + 5 - $win.scrollTop() ,dlHeight = dl.outerHeight(); - index = select[0].selectedIndex; //获取最新的 selectedIndex + index = select[0].selectedIndex; // 获取最新的 selectedIndex reElem.addClass(CLASS+'ed'); dds.removeClass(HIDE); dts.removeClass(HIDE); nearElem = null; - //初始选中样式 + // 初始选中样式 dds.eq(index).addClass(THIS).siblings().removeClass(THIS); - //上下定位识别 + // 上下定位识别 if(top + dlHeight > $win.height() && top >= dlHeight){ reElem.addClass(CLASS + 'up'); } @@ -212,7 +212,7 @@ layui.define('layer', function(exports){ followScroll(); } - //隐藏下拉 + // 隐藏下拉 ,hideDown = function(choose){ reElem.removeClass(CLASS+'ed ' + CLASS+'up'); input.blur(); @@ -223,22 +223,22 @@ layui.define('layer', function(exports){ notOption(input.val(), function(none){ var selectedIndex = select[0].selectedIndex; - //未查询到相关值 + // 未查询到相关值 if(none){ - initValue = $(select[0].options[selectedIndex]).html(); //重新获得初始选中值 + initValue = $(select[0].options[selectedIndex]).html(); // 重新获得初始选中值 - //如果是第一项,且文本值等于 placeholder,则清空初始值 + // 如果是第一项,且文本值等于 placeholder,则清空初始值 if(selectedIndex === 0 && initValue === input.attr('placeholder')){ initValue = ''; }; - //如果有选中值,则将输入框纠正为该值。否则清空输入框 + // 如果有选中值,则将输入框纠正为该值。否则清空输入框 input.val(initValue || ''); } }); } - //定位下拉滚动条 + // 定位下拉滚动条 ,followScroll = function(){ var thisDd = dl.children('dd.'+ THIS); @@ -248,18 +248,18 @@ layui.define('layer', function(exports){ ,dlHeight = dl.height() ,ddHeight = thisDd.height(); - //若选中元素在滚动条不可见底部 + // 若选中元素在滚动条不可见底部 if(posTop > dlHeight){ dl.scrollTop(posTop + dl.scrollTop() - dlHeight + ddHeight - 5); } - //若选择玄素在滚动条不可见顶部 + // 若选择玄素在滚动条不可见顶部 if(posTop < 0){ dl.scrollTop(posTop + dl.scrollTop() - 5); } }; - //点击标题区域 + // 点击标题区域 title.on('click', function(e){ reElem.hasClass(CLASS+'ed') ? ( hideDown() @@ -270,38 +270,38 @@ layui.define('layer', function(exports){ dl.find('.'+NONE).remove(); }); - //点击箭头获取焦点 + // 点击箭头获取焦点 title.find('.layui-edge').on('click', function(){ input.focus(); }); - //select 中 input 键盘事件 - input.on('keyup', function(e){ //键盘松开 + // select 中 input 键盘事件 + input.on('keyup', function(e){ // 键盘松开 var keyCode = e.keyCode; - //Tab键展开 + // Tab键展开 if(keyCode === 9){ showDown(); } - }).on('keydown', function(e){ //键盘按下 + }).on('keydown', function(e){ // 键盘按下 var keyCode = e.keyCode; - //Tab键隐藏 + // Tab键隐藏 if(keyCode === 9){ hideDown(); } - //标注 dd 的选中状态 + // 标注 dd 的选中状态 var setThisDd = function(prevNext, thisElem1){ var nearDd, cacheNearElem e.preventDefault(); - //得到当前队列元素 + // 得到当前队列元素 var thisElem = function(){ var thisDd = dl.children('dd.'+ THIS); - //如果是搜索状态,且按 Down 键,且当前可视 dd 元素在选中元素之前, - //则将当前可视 dd 元素的上一个元素作为虚拟的当前选中元素,以保证递归不中断 + // 如果是搜索状态,且按 Down 键,且当前可视 dd 元素在选中元素之前, + // 则将当前可视 dd 元素的上一个元素作为虚拟的当前选中元素,以保证递归不中断 if(dl.children('dd.'+ HIDE)[0] && prevNext === 'next'){ var showDd = dl.children('dd:not(.'+ HIDE +',.'+ DISABLED +')') ,firstIndex = showDd.eq(0).index(); @@ -318,31 +318,31 @@ layui.define('layer', function(exports){ } return thisDd; - //return dds.eq(index); + // return dds.eq(index); }(); - cacheNearElem = thisElem[prevNext](); //当前元素的附近元素 - nearDd = thisElem[prevNext]('dd:not(.'+ HIDE +')'); //当前可视元素的 dd 元素 + cacheNearElem = thisElem[prevNext](); // 当前元素的附近元素 + nearDd = thisElem[prevNext]('dd:not(.'+ HIDE +')'); // 当前可视元素的 dd 元素 - //如果附近的元素不存在,则停止执行,并清空 nearElem + // 如果附近的元素不存在,则停止执行,并清空 nearElem if(!cacheNearElem[0]) return nearElem = null; - //记录附近的元素,让其成为下一个当前元素 + // 记录附近的元素,让其成为下一个当前元素 nearElem = thisElem[prevNext](); - //如果附近不是 dd ,或者附近的 dd 元素是禁用状态,则进入递归查找 + // 如果附近不是 dd ,或者附近的 dd 元素是禁用状态,则进入递归查找 if((!nearDd[0] || nearDd.hasClass(DISABLED)) && nearElem[0]){ return setThisDd(prevNext, nearElem); } - nearDd.addClass(THIS).siblings().removeClass(THIS); //标注样式 - followScroll(); //定位滚动条 + nearDd.addClass(THIS).siblings().removeClass(THIS); // 标注样式 + followScroll(); // 定位滚动条 }; - if(keyCode === 38) setThisDd('prev'); //Up 键 - if(keyCode === 40) setThisDd('next'); //Down 键 + if(keyCode === 38) setThisDd('prev'); // Up 键 + if(keyCode === 40) setThisDd('next'); // Down 键 - //Enter 键 + // Enter 键 if(keyCode === 13){ e.preventDefault(); dl.children('dd.'+THIS).trigger('click'); @@ -357,7 +357,7 @@ layui.define('layer', function(exports){ var text = othis.text(); // 是否区分大小写 - if(laySearch !== 'exact'){ + if(laySearch !== 'cs'){ text = text.toLowerCase(); value = value.toLowerCase(); } @@ -379,7 +379,7 @@ layui.define('layer', function(exports){ return callback(none), none; }; - //搜索匹配 + // 搜索匹配 var search = function(e){ var value = this.value, keyCode = e.keyCode; @@ -402,33 +402,33 @@ layui.define('layer', function(exports){ dl.find('.'+NONE).remove(); } - followScroll(); //定位滚动条 + followScroll(); // 定位滚动条 }; if(isSearch){ input.on('keyup', search).on('blur', function(e){ var selectedIndex = select[0].selectedIndex; - thatInput = input; //当前的 select 中的 input 元素 - initValue = $(select[0].options[selectedIndex]).html(); //重新获得初始选中值 + thatInput = input; // 当前的 select 中的 input 元素 + initValue = $(select[0].options[selectedIndex]).html(); // 重新获得初始选中值 - //如果是第一项,且文本值等于 placeholder,则清空初始值 + // 如果是第一项,且文本值等于 placeholder,则清空初始值 if(selectedIndex === 0 && initValue === input.attr('placeholder')){ initValue = ''; }; setTimeout(function(){ notOption(input.val(), function(none){ - initValue || input.val(''); //none && !initValue + initValue || input.val(''); // none && !initValue }, 'blur'); }, 200); }); } - //选择 + // 选择 dds.on('click', function(){ var othis = $(this), value = othis.attr('lay-value'); - var filter = select.attr('lay-filter'); //获取过滤器 + var filter = select.attr('lay-filter'); // 获取过滤器 if(othis.hasClass(DISABLED)) return false; @@ -455,7 +455,7 @@ layui.define('layer', function(exports){ return false; }); - $(document).off('click', hide).on('click', hide); //点击其它元素关闭 select + $(document).off('click', hide).on('click', hide); // 点击其它元素关闭 select } selects.each(function(index, select){ @@ -463,7 +463,7 @@ layui.define('layer', function(exports){ ,hasRender = othis.next('.'+CLASS) ,disabled = this.disabled ,value = select.value - ,selected = $(select.options[select.selectedIndex]) //获取当前选中项 + ,selected = $(select.options[select.selectedIndex]) // 获取当前选中项 ,optionsFirst = select.options[0]; if(typeof othis.attr('lay-ignore') === 'string') return othis.show(); @@ -473,16 +473,16 @@ layui.define('layer', function(exports){ optionsFirst.value ? TIPS : (optionsFirst.innerHTML || TIPS) ) : TIPS; - //替代元素 + // 替代元素 var reElem = $(['