From bd7f97fb30989c445864b447164dcb93a9ec2790 Mon Sep 17 00:00:00 2001 From: guy Date: Sat, 27 Mar 2021 00:16:45 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/platform/web/config.js | 12 +++++ .../wrapper/layout/flex/flex.horizontal.js | 6 +-- src/core/wrapper/layout/flex/flex.vertical.js | 6 +-- .../flex/wrapper/flex.wrapper.horizontal.js | 6 +-- .../flex/wrapper/flex.wrapper.vertical.js | 6 +-- src/core/wrapper/layout/layout.td.js | 45 ++++++++++--------- src/less/core/wrapper/flex.horizontal.less | 4 +- src/less/core/wrapper/flex.vertical.less | 4 +- .../core/wrapper/flex.wrapper.horizontal.less | 4 +- .../core/wrapper/flex.wrapper.vertical.less | 4 +- 10 files changed, 56 insertions(+), 41 deletions(-) diff --git a/src/core/platform/web/config.js b/src/core/platform/web/config.js index 65174dd2ee..78cf5bffa8 100644 --- a/src/core/platform/web/config.js +++ b/src/core/platform/web/config.js @@ -21,6 +21,18 @@ BI.prepares.push(function () { // 在横向自适应场景下我们需要使用table的自适应撑出滚动条的特性（flex处理不了这种情况） // 主要出现在center_adapt或者horizontal_adapt的场景，或者主动设置horizontalAlign的场景 if (ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch) { + var justOneItem = (ob.items && ob.items.length <= 1); + // 在这种情况下，也可以通过flex支持该布局 + if (supportFlex) { + // IE下其实也是可以使用flex布局的，只要排除掉出现滚动条的情况 + if (!isIE || (ob.scrollable !== true && ob.scrolly !== true)) { + return BI.extend({}, ob, { + type: "bi.flex_horizontal", + horizontalAlign: !justOneItem && ob.horizontalAlign === BI.HorizontalAlign.Center + ? BI.HorizontalAlign.Left : ob.horizontalAlign + }); + } + } return BI.extend({}, ob, {type: "bi.table_adapt"}); } if (supportFlex) { diff --git a/src/core/wrapper/layout/flex/flex.horizontal.js b/src/core/wrapper/layout/flex/flex.horizontal.js index 11f751526e..f7a06d4154 100644 --- a/src/core/wrapper/layout/flex/flex.horizontal.js +++ b/src/core/wrapper/layout/flex/flex.horizontal.js @@ -36,16 +36,16 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, { }); if (o.columnSize[i] !== "auto") { if (o.horizontalAlign === BI.HorizontalAlign.Stretch && o.columnSize[i] !== "") { - w.element.addClass("fill"); + w.element.addClass("f-f"); } else { - w.element.addClass("shrink-none"); + w.element.addClass("f-s-n"); } } if (o.columnSize[i] > 0) { w.element.width(o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit)); } if (o.columnSize[i] === "fill") { - w.element.addClass("fill"); + w.element.addClass("f-f"); } if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ diff --git a/src/core/wrapper/layout/flex/flex.vertical.js b/src/core/wrapper/layout/flex/flex.vertical.js index d071d410a6..29eb17179c 100644 --- a/src/core/wrapper/layout/flex/flex.vertical.js +++ b/src/core/wrapper/layout/flex/flex.vertical.js @@ -35,16 +35,16 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, { }); if (o.rowSize[i] !== "auto") { if (o.verticalAlign === BI.VerticalAlign.Stretch && o.rowSize[i] !== "") { - w.element.addClass("fill"); + w.element.addClass("f-f"); } else { - w.element.addClass("shrink-none"); + w.element.addClass("f-s-n"); } } if (o.rowSize[i] > 0) { w.element.height(o.rowSize[i] <= 1 ? ((o.rowSize[i] * 100).toFixed(1) + "%") : (o.rowSize[i] / BI.pixRatio + BI.pixUnit)); } if (o.rowSize[i] === "fill") { - w.element.addClass("fill"); + w.element.addClass("f-f"); } if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js index 33fd1e4d60..7b81608e73 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js +++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js @@ -37,16 +37,16 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, { }); if (o.columnSize[i] !== "auto") { if (o.horizontalAlign === BI.HorizontalAlign.Stretch && o.columnSize[i] !== "") { - w.element.addClass("fill"); + w.element.addClass("f-f"); } else { - w.element.addClass("shrink-none"); + w.element.addClass("f-s-n"); } } if (o.columnSize[i] > 0) { w.element.width(o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit)); } if (o.columnSize[i] === "fill") { - w.element.addClass("fill"); + w.element.addClass("f-f"); } if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js index f11e1bf158..39a18f6e9f 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js +++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js @@ -37,16 +37,16 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, { }); if (o.rowSize[i] !== "auto") { if (o.verticalAlign === BI.VerticalAlign.Stretch && o.rowSize[i] !== "") { - w.element.addClass("fill"); + w.element.addClass("f-f"); } else { - w.element.addClass("shrink-none"); + w.element.addClass("f-s-n"); } } if (o.rowSize[i] > 0) { w.element.height(o.rowSize[i] <= 1 ? ((o.rowSize[i] * 100).toFixed(1) + "%") : (o.rowSize[i] / BI.pixRatio + BI.pixUnit)); } if (o.rowSize[i] === "fill") { - w.element.addClass("fill"); + w.element.addClass("f-f"); } if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ diff --git a/src/core/wrapper/layout/layout.td.js b/src/core/wrapper/layout/layout.td.js index 46b42f2383..d8e8cc3a58 100644 --- a/src/core/wrapper/layout/layout.td.js +++ b/src/core/wrapper/layout/layout.td.js @@ -7,20 +7,14 @@ BI.TdLayout = BI.inherit(BI.Layout, { props: function () { return BI.extend(BI.TdLayout.superclass.props.apply(this, arguments), { baseCls: "bi-td", - columnSize: [200, 200, 200], + columnSize: [], hgap: 0, vgap: 0, - items: [[ - { - el: {text: "label1"} - }, - { - el: {text: "label2"} - }, - { - el: {text: "label3"} - } - ]] + tgap: 0, + bgap: 0, + lgap: 0, + rgap: 0, + items: [] }); }, render: function () { @@ -85,22 +79,31 @@ BI.TdLayout = BI.inherit(BI.Layout, { for (var i = 0; i < arr.length; i++) { var w = BI._lazyCreateWidget(arr[i]); w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"}); - if (arr[i].lgap) { - w.element.css({"margin-left": arr[i].lgap / BI.pixRatio + BI.pixUnit}); + var item = arr[i]; + if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { + w.element.css({ + "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit + }); } - if (arr[i].rgap) { - w.element.css({"margin-right": arr[i].rgap / BI.pixRatio + BI.pixUnit}); + if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { + w.element.css({ + "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit + }); } - if (arr[i].tgap) { - w.element.css({"margin-top": arr[i].tgap / BI.pixRatio + BI.pixUnit}); + if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { + w.element.css({ + "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit + }); } - if (arr[i].bgap) { - w.element.css({"margin-bottom": arr[i].bgap / BI.pixRatio + BI.pixUnit}); + if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { + w.element.css({ + "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit + }); } first(w, this.rows++, i); var td = BI._lazyCreateWidget({ type: "bi.default", - width: o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : o.columnSize[i], + width: o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap + o.columnSize[i], tagName: "td", items: [w] }); diff --git a/src/less/core/wrapper/flex.horizontal.less b/src/less/core/wrapper/flex.horizontal.less index a2536dee12..c20a7c55a7 100644 --- a/src/less/core/wrapper/flex.horizontal.less +++ b/src/less/core/wrapper/flex.horizontal.less @@ -122,14 +122,14 @@ justify-content: flex-end; } - > .shrink-none { + > .f-s-n { -webkit-flex-shrink: 0; -moz-flex-shrink: 0; -ms-flex-shrink: 0; flex-shrink: 0; } - > .fill { + > .f-f { -webkit-flex-grow: 1; -moz-flex-grow: 1; -ms-flex-grow: 1; diff --git a/src/less/core/wrapper/flex.vertical.less b/src/less/core/wrapper/flex.vertical.less index 0de23d7911..eb22290b5b 100644 --- a/src/less/core/wrapper/flex.vertical.less +++ b/src/less/core/wrapper/flex.vertical.less @@ -121,14 +121,14 @@ justify-content: flex-end; } - > .shrink-none { + > .f-s-n { -webkit-flex-shrink: 0; -moz-flex-shrink: 0; -ms-flex-shrink: 0; flex-shrink: 0; } - > .fill { + > .f-f { -webkit-flex-grow: 1; -moz-flex-grow: 1; -ms-flex-grow: 1; diff --git a/src/less/core/wrapper/flex.wrapper.horizontal.less b/src/less/core/wrapper/flex.wrapper.horizontal.less index 1142520f58..48a067a268 100644 --- a/src/less/core/wrapper/flex.wrapper.horizontal.less +++ b/src/less/core/wrapper/flex.wrapper.horizontal.less @@ -129,14 +129,14 @@ justify-content: flex-end; } - > .shrink-none { + > .f-s-n { -webkit-flex-shrink: 0; -moz-flex-shrink: 0; -ms-flex-shrink: 0; flex-shrink: 0; } - > .fill { + > .f-f { -webkit-flex-grow: 1; -moz-flex-grow: 1; -ms-flex-grow: 1; diff --git a/src/less/core/wrapper/flex.wrapper.vertical.less b/src/less/core/wrapper/flex.wrapper.vertical.less index 1866ad2c38..b5b48e5aea 100644 --- a/src/less/core/wrapper/flex.wrapper.vertical.less +++ b/src/less/core/wrapper/flex.wrapper.vertical.less @@ -129,14 +129,14 @@ justify-content: flex-end; } - > .shrink-none { + > .f-s-n { -webkit-flex-shrink: 0; -moz-flex-shrink: 0; -ms-flex-shrink: 0; flex-shrink: 0; } - > .fill { + > .f-f { -webkit-flex-grow: 1; -moz-flex-grow: 1; -ms-flex-grow: 1;