left_right_vertical_adapt换一种实现

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) {

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);

src/less/core/wrapper/flex.leftrightvertical.center.less

@@ -0,0 +1,5 @@
+.bi-f-lr-v-c {
+  > .flex-left-auto {
+    margin-left: auto;
+  }
+}