From ce8fde5d43db5fb3eee701f069be8a5a9646fbc1 Mon Sep 17 00:00:00 2001 From: morning-star <26325820+Sight-wcg@users.noreply.github.com> Date: Fri, 20 Dec 2024 16:16:22 +0800 Subject: [PATCH] =?UTF-8?q?fix(table):=20=E9=9A=90=E8=97=8F=E5=85=83?= =?UTF-8?q?=E7=B4=A0=E5=86=85=E6=B8=B2=E6=9F=93=20table=20=E6=97=B6?= =?UTF-8?q?=E8=8E=B7=E5=8F=96=E5=AE=BD=E5=BA=A6=E7=9A=84=E8=A1=8C=E4=B8=BA?= =?UTF-8?q?=E5=9B=9E=E9=80=80=E5=88=B0=202.9.9=20=E4=B9=8B=E5=89=8D=20(#24?= =?UTF-8?q?02)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(table): 隐藏元素内渲染 table 时获取宽度的行为回退到 2.9.17 之前 #2187 * update code * update code * update code * chore: typo * chore: 更新注释 --- src/modules/table.js | 35 ++++++++++++++++++++++++++++------- 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/src/modules/table.js b/src/modules/table.js index e31a2a39..52fc1aef 100644 --- a/src/modules/table.js +++ b/src/modules/table.js @@ -494,7 +494,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ isNone = parent.css('display') === 'none'; } catch(e){} var parentElem = parent.parent(); - if(parent[0] && parentElem[0] && parentElem[0].nodeType === 1 && (!width || isNone)) return getWidth(parentElem); + if(parent[0] && parentElem && parentElem[0] && (!width || isNone)) return getWidth(parentElem); return width; }; return getWidth(); @@ -2851,19 +2851,40 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){ /** * 获取元素 content 区域宽度值 + * + * layui 内置 jQuery v1.12.4 中的 jQuery.fn.width 始终对值四舍五入(3.x 已修复), + * 在支持 subpixel Rendering 的浏览器中渲染表格,由于列宽分配时计算值精度不足, + * 可能会导致一些小问题(#1726) + * + * 这个方法使用 getComputedStyle 获取精确的宽度值进行计算,为了尽可能和以前的行为 + * 保持一致(主要是隐藏元素内渲染 table 递归获取父元素宽度 https://github.com/layui/layui/discussions/2398), + * 任何非预期的值,都回退到 jQuery.fn.width。未来的版本使用 ResizeObserver 时,可以直接获取表格视图元素的宽度, + * 并移除兼容性代码 + * * @param {JQuery} elem - 元素的 jQuery 对象 + * + * @see {@link https://learn.microsoft.com/zh-cn/archive/blogs/ie_cn/css-3} */ Class.prototype.getContentWidth = function(elem){ var that = this; - if(!window.getComputedStyle){ - // IE 中的 `currentStyle` 获取未显式设置的宽高时会得到 'auto',jQuery 中有一些 hack 方法获取准确值 + if( + // document + elem[0].nodeType === 9 || + // IE 中 border-box 盒模型,getComputedStyle 得到的 width/height 是按照 content-box 计算出来的 + (lay.ie && elem.css('box-sizing') === 'border-box') || + elem.css('display') === 'none' + ){ + return elem.width(); + } + + var size = that.getElementSize(elem[0]); + + // display: none|inline 元素,getComputedStyle 无法得到准确的 width/height + if(typeof size === 'undefined' || !size.width){ return elem.width(); }else{ - var size = that.getElementSize(elem[0]); - // IE BUG - // border-box: getComputedStyle 得到的 width/height 是按照 content-box 计算出来的 - return (size.boxSizing === 'border-box' && !lay.ie) + return size.boxSizing === 'border-box' ? size.width - size.paddingLeft - size.paddingRight - size.borderLeftWidth - size.borderRightWidth : size.width }