From e886e90db2afee0e6c9382853525c9f19fad6c98 Mon Sep 17 00:00:00 2001 From: guy Date: Tue, 30 Mar 2021 12:13:36 +0800 Subject: [PATCH 1/3] =?UTF-8?q?left=5Fright=5Fvertical=5Fadapt=E5=B8=83?= =?UTF-8?q?=E5=B1=80=E5=BD=93=E5=8F=B3=E8=BE=B9=E5=85=83=E7=B4=A0=E5=87=BA?= =?UTF-8?q?=E7=8E=B0invisible=E7=9A=84=E6=97=B6=E5=80=99=E7=9A=84=E6=83=85?= =?UTF-8?q?=E5=86=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/widget.js | 3 +++ .../layout/flex/flex.leftrightvertical.center.js | 14 +++++++------- src/core/wrapper/layout/layout.td.js | 11 +++++++++-- .../wrapper/flex.leftrightvertical.center.less | 4 ++++ 4 files changed, 23 insertions(+), 9 deletions(-) diff --git a/src/core/widget.js b/src/core/widget.js index b1d1fe258..6dda06edb 100644 --- a/src/core/widget.js +++ b/src/core/widget.js @@ -183,6 +183,7 @@ if (o.invisible) { // 用display属性做显示和隐藏，否则jquery会在显示时将display设为block会覆盖掉display:flex属性 this.element.css("display", "none"); + this.element.addClass("invisible"); } }, @@ -354,9 +355,11 @@ if (visible === true) { // 用this.element.show()会把display属性改成block this.element.css("display", ""); + this.element.removeClass("invisible"); this._mount(); } else if (visible === false) { this.element.css("display", "none"); + this.element.addClass("invisible"); } this.fireEvent(BI.Events.VIEW, visible); }, diff --git a/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js b/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js index 102ae4646..eaaeeb275 100644 --- a/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js +++ b/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js @@ -55,14 +55,14 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { return json; }); rightItems = BI.map(rightItems, function (i, item) { - if (i === 0) { - if (BI.isWidget(item)) { - item.element.addClass("flex-left-auto"); - } else { - var t = BI.stripEL(item); - t.cls = (t.cls || "") + " flex-left-auto"; - } + // if (i === 0) { + if (BI.isWidget(item)) { + item.element.addClass("flex-left-auto"); + } else { + var t = BI.stripEL(item); + t.cls = (t.cls || "") + " flex-left-auto"; } + // } var json = { el: BI.stripEL(item) }; diff --git a/src/core/wrapper/layout/layout.td.js b/src/core/wrapper/layout/layout.td.js index d2f66dff3..3d4cf3e9e 100644 --- a/src/core/wrapper/layout/layout.td.js +++ b/src/core/wrapper/layout/layout.td.js @@ -8,6 +8,7 @@ BI.TdLayout = BI.inherit(BI.Layout, { return BI.extend(BI.TdLayout.superclass.props.apply(this, arguments), { baseCls: "bi-td", columnSize: [], + verticalAlign: BI.VerticalAlign.Middle, hgap: 0, vgap: 0, tgap: 0, @@ -101,15 +102,21 @@ BI.TdLayout = BI.inherit(BI.Layout, { }); } first(w, this.rows++, i); + var width = o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap + o.columnSize[i]); var td = BI._lazyCreateWidget({ type: "bi.default", - width: o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap + o.columnSize[i]), + width: width, tagName: "td", items: [w] }); + // 对于表现为td的元素设置最大宽度，有几点需要注意 + // 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现 + // 2、不能给多个td设置最大宽度，这样只会平分宽度 + // 3、多百分比宽度就算了 td.element.css({ + "max-width": BI.isNumber(o.columnSize[i]) ? (o.columnSize[i] <= 1 ? width : width / BI.pixRatio + BI.pixUnit) : width, position: "relative", - "vertical-align": "middle", + "vertical-align": o.verticalAlign, margin: "0", padding: "0", border: "none" diff --git a/src/less/core/wrapper/flex.leftrightvertical.center.less b/src/less/core/wrapper/flex.leftrightvertical.center.less index 7eb867365..b193c1366 100644 --- a/src/less/core/wrapper/flex.leftrightvertical.center.less +++ b/src/less/core/wrapper/flex.leftrightvertical.center.less @@ -1,5 +1,9 @@ .bi-f-lr-v-c { > .flex-left-auto { margin-left: auto; + + &:not(.invisible) + .flex-left-auto { + margin-left: initial; + } } } From 0522c81c00da6cefb97e3b9b9986ee00e9f54c48 Mon Sep 17 00:00:00 2001 From: guy Date: Tue, 30 Mar 2021 12:38:45 +0800 Subject: [PATCH 2/3] =?UTF-8?q?left=5Fright=5Fvertical=5Fadapt=E5=B8=83?= =?UTF-8?q?=E5=B1=80=E5=BD=93=E5=8F=B3=E8=BE=B9=E5=85=83=E7=B4=A0=E5=87=BA?= =?UTF-8?q?=E7=8E=B0invisible=E7=9A=84=E6=97=B6=E5=80=99=E7=9A=84=E6=83=85?= =?UTF-8?q?=E5=86=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/less/core/wrapper/flex.leftrightvertical.center.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/less/core/wrapper/flex.leftrightvertical.center.less b/src/less/core/wrapper/flex.leftrightvertical.center.less index b193c1366..594c37853 100644 --- a/src/less/core/wrapper/flex.leftrightvertical.center.less +++ b/src/less/core/wrapper/flex.leftrightvertical.center.less @@ -2,6 +2,12 @@ > .flex-left-auto { margin-left: auto; + + .flex-left-auto.invisible { + + .flex-left-auto { + margin-left: initial; + } + } + &:not(.invisible) + .flex-left-auto { margin-left: initial; } From a0897e74f95e44b0a9a44f063d85222d0c8a30b9 Mon Sep 17 00:00:00 2001 From: guy Date: Tue, 30 Mar 2021 12:39:21 +0800 Subject: [PATCH 3/3] =?UTF-8?q?left=5Fright=5Fvertical=5Fadapt=E5=B8=83?= =?UTF-8?q?=E5=B1=80=E5=BD=93=E5=8F=B3=E8=BE=B9=E5=85=83=E7=B4=A0=E5=87=BA?= =?UTF-8?q?=E7=8E=B0invisible=E7=9A=84=E6=97=B6=E5=80=99=E7=9A=84=E6=83=85?= =?UTF-8?q?=E5=86=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/less/core/wrapper/flex.leftrightvertical.center.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/less/core/wrapper/flex.leftrightvertical.center.less b/src/less/core/wrapper/flex.leftrightvertical.center.less index 594c37853..a56cbbb61 100644 --- a/src/less/core/wrapper/flex.leftrightvertical.center.less +++ b/src/less/core/wrapper/flex.leftrightvertical.center.less @@ -2,6 +2,7 @@ > .flex-left-auto { margin-left: auto; + // 当隐藏的元素出现在中间某个元素的情况 + .flex-left-auto.invisible { + .flex-left-auto { margin-left: initial;