fix(backport): 同步 2.x 多项问题修复 (#2973)

* fix(dropdown): 同步 #2946

* fix(table): 同步 #2954

* fix(menu): 同步 #2955

* fix(table): 同步 #2964 #2970

* fix(flow): 同步 #2965

* test: 更新用于可视化测试用例的资源

* docs: 同步 2.x 文档

docs/dropdown/examples/content.md

@@ -2,39 +2,40 @@
   自定义内容
   <i class="layui-icon layui-icon-list layui-font-14"></i>
 </button>
- 
+
 <style>
-.demo-dropdown-tabs{padding: 0 16px;}
+.demo-dropdown-tabs{padding: 11px 16px 0;}
 </style>
 
-<!-- import layui -->  
+<!-- import layui -->
 <script>
-layui.use(function(){
+layui.use(function() {
   var dropdown = layui.dropdown;
+  var tabs = layui.tabs;
 
   // 自定义内容
   dropdown.render({
     elem: '#ID-dropdown-demo-content',
-    content: ['<div class="layui-tab layui-tab-brief">',
-      '<ul class="layui-tab-title">',
-        '<li class="layui-this">Tab header 1</li>',
-        '<li>Tab header 2</li>',
-        '<li>Tab header 3</li>',
+    content: ['<div class="layui-tabs">',
+      '<ul class="layui-tabs-header">',
+        '<li class="layui-this">Tab Header1</li>',
+        '<li>Tab Header2</li>',
+        '<li>Tab Header3</li>',
       '</ul>',
-      '<div class="layui-tab-content">',
-        '<div class="layui-tab-item layui-text layui-show"><p style="padding-bottom: 10px;">在 content 属性中传入任意的 html 内容，可替代默认的下拉菜单结构，从而实现更多有趣的弹出内容。</p><p> 是否发现，dropdown 组件不仅仅只是一个下拉菜单或者右键菜单，它能被赋予许多的想象可能。</p></div>',
-        '<div class="layui-tab-item">Tab body 2</div>',
-        '<div class="layui-tab-item">Tab body 3</div>',
+      '<div class="layui-tabs-body">',
+        '<div class="layui-tabs-item layui-text layui-show"><p style="padding-bottom: 10px;">在 content 属性中传入任意的 html 内容，可替代默认的下拉菜单结构，从而实现更多有趣的弹出内容。</p><p> 是否发现，dropdown 组件不仅仅只是一个下拉菜单或者右键菜单，它能被赋予许多的想象可能。</p></div>',
+        '<div class="layui-tabs-item">Tab Content2</div>',
+        '<div class="layui-tabs-item">Tab Content3</div>',
       '</div>',
     '</div>'].join(''),
     className: 'demo-dropdown-tabs',
-    style: 'width: 370px; height: 200px; box-shadow: 1px 1px 30px rgb(0 0 0 / 12%);',
+    style: 'width: 390px; box-shadow: 1px 1px 30px rgb(0 0 0 / 12%);',
     // shade: 0.3, // 弹出时开启遮罩 --- 2.8+
-    ready: function(){
-      layui.use('element', function(element){
-        element.render('tab');
+    ready: function(elem) {
+      tabs.render({
+        elem: elem.find('.layui-tabs')
       });
     }
   });
 });
-</script>
+</script>

src/components/dropdown.js

@@ -179,8 +179,10 @@ Class.prototype.init = function (rerender, type) {
   )
     that.render(type);
 
-  // 事件
-  that.events();
+  // 若面板已经打开，则无需再绑定目标元素事件，避免 render 重复执行
+  if (!elem.data(MOD_INDEX_OPENED)) {
+    that.events(); // 事件
+  }
 };
 
 // 渲染

src/components/flow.js

@@ -197,7 +197,7 @@ $.extend(component, {
                 item.attr('src', src).removeAttr('lay-src');
 
                 /* 当前图片加载就绪后，检测下一个图片是否在当前屏 */
-                next[0] && render(next);
+                next[0] && fn(next);
                 index++;
               },
               function () {

src/components/table.js

@@ -1194,9 +1194,33 @@ Class.prototype.setColsWidth = function (opt) {
 };
 
 // 重置表格尺寸/结构
-Class.prototype.resize = function () {
+var RESIZE_THRESHOLD = 2;
+Class.prototype.resize = function (entry) {
   var that = this;
 
+  // 仅由 resizeObserver 触发时生效
+  if (entry) {
+    // 当表格被隐藏时，不触发 resize
+    if (entry.contentRect.height === 0 && entry.contentRect.width === 0) {
+      return;
+    }
+
+    // 忽略微小的尺寸变化
+    var shouldIgnore =
+      entry.target._lay_lastSize &&
+      Math.abs(entry.target._lay_lastSize.height - entry.contentRect.height) <
+        RESIZE_THRESHOLD &&
+      Math.abs(entry.target._lay_lastSize.width - entry.contentRect.width) <
+        RESIZE_THRESHOLD;
+
+    if (shouldIgnore) return;
+
+    entry.target._lay_lastSize = {
+      height: entry.contentRect.height,
+      width: entry.contentRect.width,
+    };
+  }
+
   var tableElemIsConnected =
     that.layMain &&
     ('isConnected' in that.layMain[0]
@@ -2683,13 +2707,18 @@ Class.prototype.events = function () {
   thisTable.docEvent = true;
 
   // 排序
-  th.on('click', function () {
+  th.on('click', function (e) {
     var othis = $(this);
     var elemSort = othis.find(ELEM_SORT);
     var nowType = elemSort.attr('lay-sort');
     var type;
 
-    // 排序不触发的条件
+    // 表头工具元素不触发排序
+    if ($(e.target).closest('[lay-event]')[0]) {
+      return;
+    }
+
+    // 其他条件不触发排序
     if (!elemSort[0] || othis.data('resizing') === 1) {
       return othis.removeData('resizing');
     }

src/css/modules/menu.css

@@ -133,6 +133,8 @@
 .layui-menu-body-title a {
   display: block;
   margin: -5px -15px;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: rgba(0, 0, 0, 0.8);
 }
 .layui-menu-body-title a:hover {

tests/visual/assets/dist/css/layui.css

@@ -43,8 +43,9 @@
 
   /* 字体 */
   --lay-font-family:
-    -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', 'PingFang SC',
-    'Helvetica Neue', Helvetica, Arial, sans-serif;
+    system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC',
+    'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --lay-font-monospace: 'Courier New', Consolas, 'Lucida Console', monospace;
 
   /* 间距 */
@@ -5066,6 +5067,8 @@ body .layui-table-tips .layui-layer-content {
 .layui-menu-body-title a {
   display: block;
   margin: -5px -15px;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: rgba(0, 0, 0, 0.8);
 }
 

tests/visual/assets/dist/layui.esm.js

@@ -19279,8 +19279,10 @@ Class$a.prototype.init = function (rerender, type) {
   // 初始即显示或者面板弹出之后执行了刷新数据
   if (options.show || type === 'reloadData' && that.mainElem && options.target.find(that.mainElem.get(0)).length) that.render(type);
 
-  // 事件
-  that.events();
+  // 若面板已经打开，则无需再绑定目标元素事件，避免 render 重复执行
+  if (!elem.data(MOD_INDEX_OPENED)) {
+    that.events(); // 事件
+  }
 };
 
 // 渲染
@@ -24899,8 +24901,25 @@ Class$6.prototype.setColsWidth = function (opt) {
 };
 
 // 重置表格尺寸/结构
-Class$6.prototype.resize = function () {
+var RESIZE_THRESHOLD = 2;
+Class$6.prototype.resize = function (entry) {
   var that = this;
+
+  // 仅由 resizeObserver 触发时生效
+  if (entry) {
+    // 当表格被隐藏时，不触发 resize
+    if (entry.contentRect.height === 0 && entry.contentRect.width === 0) {
+      return;
+    }
+
+    // 忽略微小的尺寸变化
+    var shouldIgnore = entry.target._lay_lastSize && Math.abs(entry.target._lay_lastSize.height - entry.contentRect.height) < RESIZE_THRESHOLD && Math.abs(entry.target._lay_lastSize.width - entry.contentRect.width) < RESIZE_THRESHOLD;
+    if (shouldIgnore) return;
+    entry.target._lay_lastSize = {
+      height: entry.contentRect.height,
+      width: entry.contentRect.width
+    };
+  }
   var tableElemIsConnected = that.layMain && ('isConnected' in that.layMain[0] ? that.layMain[0].isConnected : $.contains(document.body, that.layMain[0]));
   if (!tableElemIsConnected) return;
   that.fullSize(); // 让表格铺满
@@ -26119,13 +26138,18 @@ Class$6.prototype.events = function () {
   thisTable.docEvent = true;
 
   // 排序
-  th.on('click', function () {
+  th.on('click', function (e) {
     var othis = $(this);
     var elemSort = othis.find(ELEM_SORT);
     var nowType = elemSort.attr('lay-sort');
     var type;
 
-    // 排序不触发的条件
+    // 表头工具元素不触发排序
+    if ($(e.target).closest('[lay-event]')[0]) {
+      return;
+    }
+
+    // 其他条件不触发排序
     if (!elemSort[0] || othis.data('resizing') === 1) {
       return othis.removeData('resizing');
     }
@@ -31831,7 +31855,7 @@ $.extend(component, {
               item.attr('src', src).removeAttr('lay-src');
 
               /* 当前图片加载就绪后，检测下一个图片是否在当前屏 */
-              next[0] && render(next);
+              next[0] && fn(next);
               index++;
             }, function () {
               item.removeAttr('lay-src');

tests/visual/assets/dist/layui.js

@@ -19282,8 +19282,10 @@ var layui = (function () {
     // 初始即显示或者面板弹出之后执行了刷新数据
     if (options.show || type === 'reloadData' && that.mainElem && options.target.find(that.mainElem.get(0)).length) that.render(type);
 
-    // 事件
-    that.events();
+    // 若面板已经打开，则无需再绑定目标元素事件，避免 render 重复执行
+    if (!elem.data(MOD_INDEX_OPENED)) {
+      that.events(); // 事件
+    }
   };
 
   // 渲染
@@ -24902,8 +24904,25 @@ var layui = (function () {
   };
 
   // 重置表格尺寸/结构
-  Class$6.prototype.resize = function () {
+  var RESIZE_THRESHOLD = 2;
+  Class$6.prototype.resize = function (entry) {
     var that = this;
+
+    // 仅由 resizeObserver 触发时生效
+    if (entry) {
+      // 当表格被隐藏时，不触发 resize
+      if (entry.contentRect.height === 0 && entry.contentRect.width === 0) {
+        return;
+      }
+
+      // 忽略微小的尺寸变化
+      var shouldIgnore = entry.target._lay_lastSize && Math.abs(entry.target._lay_lastSize.height - entry.contentRect.height) < RESIZE_THRESHOLD && Math.abs(entry.target._lay_lastSize.width - entry.contentRect.width) < RESIZE_THRESHOLD;
+      if (shouldIgnore) return;
+      entry.target._lay_lastSize = {
+        height: entry.contentRect.height,
+        width: entry.contentRect.width
+      };
+    }
     var tableElemIsConnected = that.layMain && ('isConnected' in that.layMain[0] ? that.layMain[0].isConnected : jquery.contains(document.body, that.layMain[0]));
     if (!tableElemIsConnected) return;
     that.fullSize(); // 让表格铺满
@@ -26122,13 +26141,18 @@ var layui = (function () {
     thisTable.docEvent = true;
 
     // 排序
-    th.on('click', function () {
+    th.on('click', function (e) {
       var othis = jquery(this);
       var elemSort = othis.find(ELEM_SORT);
       var nowType = elemSort.attr('lay-sort');
       var type;
 
-      // 排序不触发的条件
+      // 表头工具元素不触发排序
+      if (jquery(e.target).closest('[lay-event]')[0]) {
+        return;
+      }
+
+      // 其他条件不触发排序
       if (!elemSort[0] || othis.data('resizing') === 1) {
         return othis.removeData('resizing');
       }
@@ -31834,7 +31858,7 @@ var layui = (function () {
                 item.attr('src', src).removeAttr('lay-src');
 
                 /* 当前图片加载就绪后，检测下一个图片是否在当前屏 */
-                next[0] && render(next);
+                next[0] && fn(next);
                 index++;
               }, function () {
                 item.removeAttr('lay-src');

tests/visual/table-test.html

@@ -302,8 +302,9 @@
                   },
                   {
                     field: 'sex',
-                    title: '性别',
-                    width: 80,
+                    title:
+                      '性别  <i class="layui-icon layui-icon-female" lay-event="gender"></i>',
+                    width: 100,
                     edit: 'text',
                     sort: true,
                     escape: false,
@@ -671,7 +672,13 @@
 
         // 表头自定义元素工具事件
         table.on('colTool(test)', (obj) => {
+          const { event } = obj;
           console.log(obj);
+          if (event === 'gender') {
+            layer.alert(layui.util.escape(JSON.stringify(obj.col)), {
+              title: '当前列属性',
+            });
+          }
         });
 
         // 触发单元格工具事件