Browse Source

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

es6
guy 3 years ago
parent
commit
6a7548de5c
  1. 3
      src/core/widget.js
  2. 18
      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) {
// 用display属性做显示和隐藏,否则jquery会在显示时将display设为block会覆盖掉display:flex属性
this.element.css("display", "none");
this.element.addClass("invisible");
}
},
@ -355,11 +354,9 @@
if (visible === true) {
// 用this.element.show()会把display属性改成block
this.element.css("display", "");
this.element.removeClass("invisible");
this._mount();
} else if (visible === false) {
this.element.css("display", "none");
this.element.addClass("invisible");
}
this.fireEvent(BI.Events.VIEW, visible);
},

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

@ -55,14 +55,6 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
return json;
});
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 = {
el: BI.stripEL(item)
};
@ -70,9 +62,7 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
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);
}
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);
@ -82,7 +72,11 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
}
return json;
});
return leftItems.concat(rightItems);
return leftItems.concat({
type: "bi.flex_vertical_adapt",
cls: "flex-left-auto",
items: rightItems
});
},
resize: function () {

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

@ -1,16 +1,5 @@
.bi-f-lr-v-c {
> .flex-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