feat(form): 优化 lay-ignore 的判断逻辑 (#2585)

* feat: 修改ignore的判断逻辑；增加ignore的开发案例；

* Update src/modules/form.js

Co-authored-by: morning-star <26325820+Sight-wcg@users.noreply.github.com>

* Update src/modules/form.js

Co-authored-by: morning-star <26325820+Sight-wcg@users.noreply.github.com>

* Update src/modules/form.js

Co-authored-by: morning-star <26325820+Sight-wcg@users.noreply.github.com>

* Update src/modules/form.js

Co-authored-by: morning-star <26325820+Sight-wcg@users.noreply.github.com>

* test(form): 优化 lay-ignore 示例布局

* docs(form): 优化 lay-ignore 文档说明

* fix(form): 修复 tips 提示风格时对 lay-ignore 目标元素的判断问题

---------

Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
Co-authored-by: morning-star <26325820+Sight-wcg@users.noreply.github.com>

docs/form/index.md

@@ -121,7 +121,7 @@ form 还可以借助*栅格*实现更灵活的响应式布局。
 | lay-append-to <sup>2.9.12+</sup> <sup>实验性</sup> | `body` | 是否将 select 面板追加到 body 元素中。`<select>` 元素 **私有属性** |
 | lay-append-position <sup>2.9.12+</sup> <sup>实验性</sup> | `absolute` 绝对定位 (默认)<br>`fixed` 固定定位 | 用于设置 select 面板开启 `lay-append-to` 属性后的定位方式。`<select>` 元素 **私有属性** |
 | lay-submit | 无需值 | 设置元素（一般为`<button>` 标签）触发 `submit` 提交事件 |
-| lay-ignore | 无需值 | 设置表单元素忽略渲染，即让元素保留系统原始 UI 风格 |
+| lay-ignore | 无需值 | 设置表单元素忽略渲染，即让元素保留系统原始 UI 风格。注 <sup>2.10.2+</sup>：该属性若设置在 `<div>` 等父元素上，则该父元素下的所有表单均可被忽略渲染。 |
 
 
 <h2 id="render" lay-toc="{hot: true, level: 2}">渲染</h2>

examples/form.html

@@ -502,11 +502,49 @@
 
   </script>
 
-
+  <h3>设置 lay-ignore 忽略渲染</h3>
+  <hr>
+  <div class="layui-form">
+    <div class="layui-form-item">
+      <div class="layui-inline">未设置 ignore 时：</div>
+      <div class="layui-inline">
+        <input type="checkbox" name="like[write]" title="checkbox">
+      </div>
+    </div>
+    <div class="layui-form-item">
+      <div class="layui-inline">忽略指令直接设置：</div>
+      <div class="layui-inline">
+        <input type="checkbox" name="like[write]" lay-ignore title="写作">
+        <input type="radio" name="sex" value="1" lay-ignore title="男">
+        <select name="quiz" lay-ignore>
+          <option value="">请选择</option>
+          <option value="AAAAA" selected>AAAAA</option>
+          <option value="BBBBB">BBBBB</option>
+          <option value="CCCCC">CCCCC</option>
+          <option value="DDDDD" disabled>DDDDD</option>
+          <option value="EEEEE">EEEEE</option>
+        </select>
+      </div>
+    </div>
+    <div class="layui-form-item">
+      <div class="layui-inline">忽略指令父元素设置：</div>
+      <div class="layui-inline" lay-ignore>
+        <input type="checkbox" name="like[write]" title="写作">
+        <input type="radio" name="sex" value="1" title="男">
+        <select name="quiz">
+          <option value="">请选择</option>
+          <option value="AAAAA">AAAAA</option>
+          <option value="BBBBB">BBBBB</option>
+          <option value="CCCCC" selected>CCCCC</option>
+          <option value="DDDDD" disabled>DDDDD</option>
+          <option value="EEEEE">EEEEE</option>
+        </select>
+      </div>
+    </div>
+  </div>
 
   <h3>原始表单调试：</h3>
   <hr>
-
   <form id="test1" action="" target="_blank">
     <input type="radio" value="girl" disabled>
     <input type="checkbox" name="love[a]">
@@ -525,5 +563,6 @@
     <button type="submit">原始表单，测试提交</button>
   </form>
 
+  <br><br>
 </body>
 </html>

src/css/layui.css

@@ -766,7 +766,6 @@ hr.layui-border-black{border-width: 0 0 1px;}
 .layui-form select,
 .layui-form input[type=checkbox],
 .layui-form input[type=radio]{display: none;}
-.layui-form *[lay-ignore]{display: initial;}
 
 .layui-form-item{position: relative; margin-bottom: 15px; clear: both;}
 .layui-form-item:after{content:'\20'; clear: both; display: block; height:0;}

src/modules/form.js

@@ -863,7 +863,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
           var selected = $(select.options[select.selectedIndex]); // 获取当前选中项
           var optionsFirst = select.options[0];
           
-          if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
+          if(othis.closest('[lay-ignore]').length > 0) return othis.show();
           
           var isSearch = typeof othis.attr('lay-search') === 'string'
           var isCreatable = typeof othis.attr('lay-creatable') === 'string' && isSearch
@@ -1028,7 +1028,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
           // 若为开关，则对 title 进行分隔解析
           title = skin === 'switch' ? title.split('|') : [title];
           
-          if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
+          if(othis.closest('[lay-ignore]').length > 0) return othis.show();
 
           // 处理 IE8 indeterminate 属性重新定义 get set 后无法设置值的问题
           if(needCheckboxFallback){
@@ -1111,7 +1111,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
           var disabled = this.disabled;
           var skin = othis.attr('lay-skin');
           
-          if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
+          if(othis.closest('[lay-ignore]').length > 0) return othis.show();
 
           if(needCheckboxFallback){
             toggleAttribute.call(radio, 'lay-form-sync-checked', radio.checked);
@@ -1301,12 +1301,11 @@ layui.define(['lay', 'layer', 'util'], function(exports){
             // 提示层风格
             if (verType === 'tips') {
               layer.tips(errorText, function() {
-                if(typeof othis.attr('lay-ignore') !== 'string'){
+                if (othis.closest('[lay-ignore]').length > 0) {
-                  if(isForm2Elem){
+                  return othis;
+                } else if(isForm2Elem) {
                   return othis.next();
                 }
-                }
-                return othis;
               }(), {tips: 1});
             } else if(verType === 'alert') {
               layer.alert(errorText, {title: '提示', shadeClose: true});