From 54e34e711b9ad9501596469e2eff72a1ecc3d49c Mon Sep 17 00:00:00 2001 From: guy Date: Fri, 30 Jul 2021 16:36:41 +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 | 25 +++++++ src/core/wrapper/layout/adapt/adapt.table.js | 7 +- .../layout/fill/float.fill.horizontal.js | 65 ++++++++++++++++--- src/core/wrapper/layout/layout.td.js | 7 +- src/less/core/wrapper/fill.horizontal.less | 10 +-- 5 files changed, 97 insertions(+), 17 deletions(-) diff --git a/src/core/platform/web/config.js b/src/core/platform/web/config.js index 49f9ab7d4..eba904a57 100644 --- a/src/core/platform/web/config.js +++ b/src/core/platform/web/config.js @@ -29,7 +29,26 @@ BI.prepares.push(function () { }); BI.Plugin.configWidget("bi.inline", function (ob) { // 当列宽既需要自动列宽又需要自适应列宽时，inline布局也处理不了了，降级table处理吧 + var hasAutoAndFillColumnSize; if (ob.columnSize && ob.columnSize.indexOf("") >= 0 && ob.columnSize.indexOf("fill") >= 0) { + hasAutoAndFillColumnSize = true; + } else { + var hasAuto = false, hasFill = false; + BI.each(ob.items, function (i, item) { + if (item.width === "fill") { + hasFill = true; + } else if (BI.isNull(item.width) || item.width === "") { + hasAuto = true; + } + }); + hasAutoAndFillColumnSize = hasAuto && hasFill; + } + + if (hasAutoAndFillColumnSize) { + // 宽度是不是受限 + if ((ob.scrollable !== true && ob.scrollx !== true) || ob.horizontalAlign === BI.HorizontalAlign.Stretch) { + return BI.extend({}, ob, {type: "bi.horizontal_float_fill"}); + } return BI.extend({ horizontalAlign: BI.HorizontalAlign.Stretch }, ob, {type: "bi.table_adapt"}); @@ -98,6 +117,12 @@ BI.prepares.push(function () { scrollx: false }, ob, {type: "bi.flex_horizontal"}); } + if ((ob.horizontalAlign && ob.horizontalAlign !== BI.HorizontalAlign.Stretch) || (ob.scrollable === true || ob.scrollx === true)) { + // 宽度不受限，要用table布局 + return BI.extend({ + horizontalAlign: BI.HorizontalAlign.Stretch + }, ob, {type: "bi.table_adapt"}); + } return BI.extend({}, ob, {type: "bi.horizontal_float_fill"}); }); BI.Plugin.configWidget("bi.vertical_fill", function (ob) { diff --git a/src/core/wrapper/layout/adapt/adapt.table.js b/src/core/wrapper/layout/adapt/adapt.table.js index a2ddcc77e..1b7bebada 100644 --- a/src/core/wrapper/layout/adapt/adapt.table.js +++ b/src/core/wrapper/layout/adapt/adapt.table.js @@ -4,9 +4,9 @@ * @extends BI.Layout */ BI.TableAdaptLayout = BI.inherit(BI.Layout, { - props: function () { + props: function (props) { return BI.extend(BI.TableAdaptLayout.superclass.props.apply(this, arguments), { - baseCls: "bi-t-a", + baseCls: "bi-t-a" + (props.verticalAlign === BI.VerticalAlign.Stretch ? " bi-h-fill" : ""), columnSize: [], verticalAlign: BI.VerticalAlign.Top, horizontalAlign: BI.HorizontalAlign.Left, @@ -46,6 +46,9 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, { if (!this.hasWidget(this._getChildName(i))) { var w = BI._lazyCreateWidget(item); w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"}); + if (o.verticalAlign === BI.VerticalAlign.Stretch) { + w.element.addClass("h-fill-item"); + } td = BI._lazyCreateWidget({ type: "bi.default", width: width, diff --git a/src/core/wrapper/layout/fill/float.fill.horizontal.js b/src/core/wrapper/layout/fill/float.fill.horizontal.js index 380cb1664..e2ed9ba86 100644 --- a/src/core/wrapper/layout/fill/float.fill.horizontal.js +++ b/src/core/wrapper/layout/fill/float.fill.horizontal.js @@ -1,8 +1,9 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, { props: function () { return BI.extend(BI.FloatHorizontalFillLayout.superclass.props.apply(this, arguments), { - baseCls: "bi-h-float-fill", - verticalAlign: BI.VerticalAlign.Top, + baseCls: "bi-h-float-fill bi-h-fill", + horizontalAlign: BI.HorizontalAlign.Stretch, + verticalAlign: BI.VerticalAlign.Stretch, hgap: 0, vgap: 0, lgap: 0, @@ -30,6 +31,54 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, { var self = this, o = this.options; items = BI.compact(items); var rank = 0; + + function createWidget (i, item, desc) { + if (o.verticalAlign !== BI.VerticalAlign.Stretch) { + var w = BI._lazyCreateWidget({ + type: "bi.vertical_adapt", + horizontalAlign: BI.HorizontalAlign.Stretch, + verticalAlign: o.verticalAlign, + items: [item] + }); + } else { + var w = BI._lazyCreateWidget(item); + } + 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 (desc) { + if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { + w.element.css({ + "margin-right": ((i === o.items.length - 1 ? o.hgap : 0) + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit + }); + } + if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { + w.element.css({ + "margin-left": (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit + }); + } + } else { + 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 (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 (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 + }); + } + return w; + } + BI.any(items, function (i, item) { if (BI.isEmptyObject(item)) { return true; @@ -38,9 +87,9 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, { if (columnSize === "fill") { return true; } - var w = BI._lazyCreateWidget(item); + var w = createWidget(i, item); self.addWidget(self._getChildName(rank++), w); - w.element.addClass("h-float-fill-item"); + w.element.addClass("h-fill-item"); w.element.css({ float: "left", position: "relative" @@ -54,9 +103,9 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, { if (columnSize === "fill") { return true; } - var w = BI._lazyCreateWidget(item); + var w = createWidget(i, item, true); self.addWidget(self._getChildName(rank++), w); - w.element.addClass("h-float-fill-item"); + w.element.addClass("h-fill-item"); w.element.css({ float: "right", position: "relative" @@ -65,9 +114,9 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, { BI.each(items, function (i, item) { var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; if (columnSize === "fill") { - var w = BI._lazyCreateWidget(item); + var w = createWidget(i, item); self.addWidget(self._getChildName(rank++), w); - w.element.addClass("h-float-fill-item").css({ + w.element.addClass("h-fill-item").css({ position: "relative" }); } diff --git a/src/core/wrapper/layout/layout.td.js b/src/core/wrapper/layout/layout.td.js index fe2df2f70..93d38286c 100644 --- a/src/core/wrapper/layout/layout.td.js +++ b/src/core/wrapper/layout/layout.td.js @@ -4,9 +4,9 @@ * @extends BI.Layout */ BI.TdLayout = BI.inherit(BI.Layout, { - props: function () { + props: function (props) { return BI.extend(BI.TdLayout.superclass.props.apply(this, arguments), { - baseCls: "bi-td", + baseCls: "bi-td" + (props.verticalAlign === BI.VerticalAlign.Stretch ? " bi-h-fill" : ""), columnSize: [], rowSize: [], verticalAlign: BI.VerticalAlign.Middle, @@ -89,6 +89,9 @@ BI.TdLayout = BI.inherit(BI.Layout, { for (var i = 0; i < arr.length; i++) { var w = BI._lazyCreateWidget(arr[i]); + if (o.verticalAlign === BI.VerticalAlign.Stretch) { + w.element.addClass("h-fill-item"); + } w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"}); var item = arr[i]; if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { diff --git a/src/less/core/wrapper/fill.horizontal.less b/src/less/core/wrapper/fill.horizontal.less index 40c7a9aaf..dd498af6e 100644 --- a/src/less/core/wrapper/fill.horizontal.less +++ b/src/less/core/wrapper/fill.horizontal.less @@ -1,5 +1,5 @@ -.bi-h-float-fill { - .h-float-fill-item { - height: 100%; - } -} \ No newline at end of file +.bi-h-fill { + .h-fill-item { + height: 100%; + } +}