Browse Source

left_right_vertical_adapt布局当右边元素出现invisible的时候的情况

es6
guy 4 years ago
parent
commit
6a7548de5c
  1. 3
      src/core/widget.js
  2. 16
      src/core/wrapper/layout/flex/flex.leftrightvertical.center.js
  3. 11
      src/less/core/wrapper/flex.leftrightvertical.center.less

3
src/core/widget.js

@ -183,7 +183,6 @@
if (o.invisible) { if (o.invisible) {
// 用display属性做显示和隐藏,否则jquery会在显示时将display设为block会覆盖掉display:flex属性 // 用display属性做显示和隐藏,否则jquery会在显示时将display设为block会覆盖掉display:flex属性
this.element.css("display", "none"); this.element.css("display", "none");
this.element.addClass("invisible");
} }
}, },
@ -355,11 +354,9 @@
if (visible === true) { if (visible === true) {
// 用this.element.show()会把display属性改成block // 用this.element.show()会把display属性改成block
this.element.css("display", ""); this.element.css("display", "");
this.element.removeClass("invisible");
this._mount(); this._mount();
} else if (visible === false) { } else if (visible === false) {
this.element.css("display", "none"); this.element.css("display", "none");
this.element.addClass("invisible");
} }
this.fireEvent(BI.Events.VIEW, visible); this.fireEvent(BI.Events.VIEW, visible);
}, },

16
src/core/wrapper/layout/flex/flex.leftrightvertical.center.js

@ -55,14 +55,6 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
return json; return json;
}); });
rightItems = BI.map(rightItems, function (i, item) { 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";
}
// }
var json = { var json = {
el: BI.stripEL(item) el: BI.stripEL(item)
}; };
@ -70,10 +62,8 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
json.tgap = o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 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 (o.rhgap + o.rlgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
if (i > 0) {
json.lgap = o.rlgap + (item.lgap || 0) + (item.hgap || 0); json.lgap = o.rlgap + (item.lgap || 0) + (item.hgap || 0);
} }
}
if (o.rhgap + o.rrgap + (item.rgap || 0) + (item.hgap || 0) !== 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); json.rgap = o.rhgap + o.rrgap + (item.rgap || 0) + (item.hgap || 0);
} }
@ -82,7 +72,11 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
} }
return json; return json;
}); });
return leftItems.concat(rightItems); return leftItems.concat({
type: "bi.flex_vertical_adapt",
cls: "flex-left-auto",
items: rightItems
});
}, },
resize: function () { resize: function () {

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

@ -1,16 +1,5 @@
.bi-f-lr-v-c { .bi-f-lr-v-c {
> .flex-left-auto { > .flex-left-auto {
margin-left: auto; margin-left: auto;
// 当隐藏的元素出现在中间某个元素的情况
+ .flex-left-auto.invisible {
+ .flex-left-auto {
margin-left: initial;
}
}
&:not(.invisible) + .flex-left-auto {
margin-left: initial;
}
} }
} }

Loading…
Cancel
Save