Browse Source

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

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

3
src/core/widget.js

@ -183,6 +183,7 @@
if (o.invisible) {
// 用display属性做显示和隐藏,否则jquery会在显示时将display设为block会覆盖掉display:flex属性
this.element.css("display", "none");
this.element.addClass("invisible");
}
},
@ -354,9 +355,11 @@
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);
},

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

@ -55,14 +55,14 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
return json;
});
rightItems = BI.map(rightItems, function (i, item) {
if (i === 0) {
// 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)
};

11
src/core/wrapper/layout/layout.td.js

@ -8,6 +8,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
return BI.extend(BI.TdLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-td",
columnSize: [],
verticalAlign: BI.VerticalAlign.Middle,
hgap: 0,
vgap: 0,
tgap: 0,
@ -101,15 +102,21 @@ BI.TdLayout = BI.inherit(BI.Layout, {
});
}
first(w, this.rows++, i);
var width = o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap + o.columnSize[i]);
var td = BI._lazyCreateWidget({
type: "bi.default",
width: o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap + o.columnSize[i]),
width: width,
tagName: "td",
items: [w]
});
// 对于表现为td的元素设置最大宽度,有几点需要注意
// 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现
// 2、不能给多个td设置最大宽度,这样只会平分宽度
// 3、多百分比宽度就算了
td.element.css({
"max-width": BI.isNumber(o.columnSize[i]) ? (o.columnSize[i] <= 1 ? width : width / BI.pixRatio + BI.pixUnit) : width,
position: "relative",
"vertical-align": "middle",
"vertical-align": o.verticalAlign,
margin: "0",
padding: "0",
border: "none"

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

@ -1,5 +1,9 @@
.bi-f-lr-v-c {
> .flex-left-auto {
margin-left: auto;
&:not(.invisible) + .flex-left-auto {
margin-left: initial;
}
}
}

Loading…
Cancel
Save