From d3f2187770506d35805411d58cd8a64bd7c90630 Mon Sep 17 00:00:00 2001 From: guy Date: Fri, 26 Mar 2021 16:01:37 +0800 Subject: [PATCH] =?UTF-8?q?left=5Fright=5Fvertical=5Fadapt=E6=8D=A2?= =?UTF-8?q?=E4=B8=80=E7=A7=8D=E5=AE=9E=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/platform/web/config.js | 37 +++++-- .../flex/flex.leftrightvertical.center.js | 102 ++++++++++++++++++ .../flex.leftrightvertical.center.less | 5 + 3 files changed, 136 insertions(+), 8 deletions(-) create mode 100644 src/core/wrapper/layout/flex/flex.leftrightvertical.center.js create mode 100644 src/less/core/wrapper/flex.leftrightvertical.center.less diff --git a/src/core/platform/web/config.js b/src/core/platform/web/config.js index ea1c29cf6..65174dd2e 100644 --- a/src/core/platform/web/config.js +++ b/src/core/platform/web/config.js @@ -23,8 +23,11 @@ BI.prepares.push(function () { if (ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch) { return BI.extend({}, ob, {type: "bi.table_adapt"}); } - if (!isIE && supportFlex) { - return BI.extend({}, ob, {type: "bi.flex_horizontal"}); + if (supportFlex) { + // IE下其实也是可以使用flex布局的，只要排除掉出现滚动条的情况 + if (!isIE || (ob.scrollable !== true && ob.scrolly !== true)) { + return BI.extend({}, ob, {type: "bi.flex_horizontal"}); + } } // // 解决使用inline_vertical_adapt的顺序问题 // // 从右往左放置时，为了兼容，我们统一采用从右到左的放置方式 @@ -40,8 +43,11 @@ BI.prepares.push(function () { var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1); var isAdapt = !ob.horizontalAlign || ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch; if (!isAdapt || justOneItem) { - if (!isIE && supportFlex) { - return BI.extend({}, ob, {type: "bi.flex_center_adapt"}); + if (supportFlex) { + // IE下其实也是可以使用flex布局的，只要排除掉出现滚动条的情况 + if (!isIE || (ob.scrollable !== true && ob.scrollx !== true && ob.scrolly !== true)) { + return BI.extend({}, ob, {type: "bi.flex_center_adapt"}); + } } return BI.extend({}, ob, {type: "bi.inline_center_adapt"}); } @@ -51,8 +57,11 @@ BI.prepares.push(function () { var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1); var isAdapt = ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch; if (!isAdapt || justOneItem) { - if (!isIE && supportFlex) { - return BI.extend({}, ob, {type: "bi.flex_vertical_center_adapt"}); + if (supportFlex) { + // IE下其实也是可以使用flex布局的，只要排除掉出现滚动条的情况 + if (!isIE || (ob.scrollable !== true && ob.scrolly !== true)) { + return BI.extend({}, ob, {type: "bi.flex_vertical_adapt"}); + } } return BI.extend({}, ob, {type: "bi.inline_vertical_adapt"}); } @@ -68,11 +77,23 @@ BI.prepares.push(function () { return ob; }); BI.Plugin.configWidget("bi.horizontal_float", function (ob) { - if (!BI.isIE() && isSupportFlex()) { - return BI.extend({}, ob, {type: "bi.flex_horizontal_adapt"}); + if (isSupportFlex()) { + // IE下其实也是可以使用flex布局的，只要排除掉出现滚动条的情况 + if (!BI.isIE() || (ob.scrollable !== true && ob.scrollx !== true)) { + return BI.extend({}, ob, {type: "bi.flex_horizontal_adapt"}); + } } return BI.extend({}, ob, {type: "bi.inline_horizontal_adapt"}); }); + BI.Plugin.configWidget("bi.left_right_vertical_adapt", function (ob) { + if (isSupportFlex()) { + // IE下其实也是可以使用flex布局的，只要排除掉出现滚动条的情况 + if (!BI.isIE() || (ob.scrollable !== true && ob.scrolly !== true)) { + return BI.extend({}, ob, {type: "bi.flex_left_right_vertical_adapt"}); + } + } + return ob; + }); BI.Plugin.configWidget("bi.flex_horizontal", function (ob) { if (ob.scrollable === true || ob.scrolly === true) { diff --git a/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js b/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js new file mode 100644 index 000000000..47a8194c1 --- /dev/null +++ b/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js @@ -0,0 +1,102 @@ +BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { + props: function () { + return BI.extend(BI.FlexLeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), { + baseCls: "bi-f-lr-v-c", + items: {}, + llgap: 0, + lrgap: 0, + lhgap: 0, + ltgap: 0, + lbgap: 0, + lvgap: 0, + rlgap: 0, + rrgap: 0, + rhgap: 0, + rtgap: 0, + rbgap: 0, + rvgap: 0 + }); + }, + render: function () { + var o = this.options, self = this; + BI.FlexLeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments); + return { + type: "bi.flex_vertical_adapt", + ref: function (_ref) { + self.layout = _ref; + }, + items: this._formatItems(), + scrollx: o.scrollx, + scrolly: o.scrolly, + scrollable: o.scrollable + }; + }, + + _formatItems: function () { + var o = this.options; + var leftItems = o.items.left || []; + var rightItems = o.items.right || []; + leftItems = BI.map(leftItems, function (i, item) { + var json = { + el: BI.stripEL(item) + }; + if (o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { + json.tgap = o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0); + } + if (o.lhgap + o.llgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { + json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + (item.lgap || 0) + (item.hgap || 0); + } + if (o.lhgap + o.lrgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { + json.rgap = o.lhgap + o.lrgap + (item.rgap || 0) + (item.hgap || 0); + } + if (o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { + json.bgap = o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0); + } + return json; + }); + rightItems = BI.map(rightItems, function (i, item) { + if (i === 0) { + if (BI.isWidget(item)) { + item.addClass("flex-left-auto"); + } else { + var t = BI.stripEL(item); + t.cls = (t.cls || "") + " flex-left-auto"; + } + } + var json = { + el: BI.stripEL(item) + }; + if (o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { + json.tgap = o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0); + } + if (o.rhgap + o.rlgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { + if (i > 0) { + json.lgap = o.rlgap + (item.lgap || 0) + (item.hgap || 0); + } + } + if (o.rhgap + o.rrgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { + json.rgap = o.rhgap + o.rrgap + (item.rgap || 0) + (item.hgap || 0); + } + if (o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { + json.bgap = o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0); + } + return json; + }); + return leftItems.concat(rightItems); + }, + + resize: function () { + // console.log("left_right_vertical_adapt布局不需要resize"); + }, + + addItem: function () { + // do nothing + throw new Error("cannot be added"); + }, + + populate: function (items) { + this.options.items = items; + this.layout.populate(this._formatItems()); + } +}); +BI.shortcut("bi.flex_left_right_vertical_adapt", BI.FlexLeftRightVerticalAdaptLayout); diff --git a/src/less/core/wrapper/flex.leftrightvertical.center.less b/src/less/core/wrapper/flex.leftrightvertical.center.less new file mode 100644 index 000000000..7eb867365 --- /dev/null +++ b/src/less/core/wrapper/flex.leftrightvertical.center.less @@ -0,0 +1,5 @@ +.bi-f-lr-v-c { + > .flex-left-auto { + margin-left: auto; + } +}