diff --git a/src/base/single/label/abstract.label.js b/src/base/single/label/abstract.label.js index 9a660c46d..d5a377fae 100644 --- a/src/base/single/label/abstract.label.js +++ b/src/base/single/label/abstract.label.js @@ -83,7 +83,7 @@ }); return; } - if (o.whiteSpace == "normal") { // 1.3 + if (o.whiteSpace === "normal") { // 1.3 BI.extend(json, { hgap: o.hgap, vgap: o.vgap, @@ -152,7 +152,7 @@ }); return; } - if (o.whiteSpace == "normal") { // 1.7 + if (o.whiteSpace === "normal") { // 1.7 BI.extend(json, { hgap: o.hgap, vgap: o.vgap, diff --git a/src/core/4.widget.js b/src/core/4.widget.js index e85eefe80..8655b8ef9 100644 --- a/src/core/4.widget.js +++ b/src/core/4.widget.js @@ -221,7 +221,10 @@ } this._mount(); - this.__async === true && isMounted && callLifeHook(this, "mounted"); + if (this.__async === true && isMounted) { + callLifeHook(this, "mounted"); + this.fireEvent(BI.Events.MOUNT); + } }, _setParent: function (parent) { diff --git a/src/core/platform/web/config.js b/src/core/platform/web/config.js index 030c03897..cf49db71c 100644 --- a/src/core/platform/web/config.js +++ b/src/core/platform/web/config.js @@ -14,13 +14,9 @@ BI.prepares.push(function () { return _isSupportFlex; }; BI.Plugin.configWidget("bi.horizontal", function (ob) { - var isIE = BI.isIE(), supportFlex = isSupportFlex(), isLessIE8 = isIE && BI.getIEVersion() < 8; - if (isLessIE8) { - return ob; - } // 在横向自适应场景下我们需要使用table的自适应撑出滚动条的特性(flex处理不了这种情况) // 主要出现在center_adapt或者horizontal_adapt的场景,或者主动设置horizontalAlign的场景 - if (ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch) { + // if (ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch) { // 虽然有两个元素以上的时候,有场景是控制一个显示一个隐藏的效果,还无法通过flex来实现 // var justOneItem = (ob.items && ob.items.length <= 1); // // 在这种情况下,也可以通过flex支持该布局 @@ -42,9 +38,9 @@ BI.prepares.push(function () { // ? BI.HorizontalAlign.Left : ob.horizontalAlign // }); // } - return BI.extend({}, ob, {type: "bi.table_adapt"}); - } - if (supportFlex) { + // return BI.extend({}, ob, {type: "bi.table_adapt"}); + // } + if (isSupportFlex()) { // IE下其实也是可以使用flex布局的,只要排除掉出现滚动条的情况 // if (!isIE || (ob.scrollable !== true && ob.scrolly !== true)) { return BI.extend({}, ob, {type: "bi.flex_horizontal"}); @@ -56,41 +52,42 @@ BI.prepares.push(function () { // type: "bi.inline" // }); // } + return BI.extend({}, ob, {type: "bi.inline"}); // 否则采用table,不过horizontalAlign的right就不支持了。 - return BI.extend({}, ob, {type: "bi.table_adapt"}); - }); - BI.Plugin.configWidget("bi.center_adapt", function (ob) { - var 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 (supportFlex) { - // IE下其实也是可以使用flex布局的,只要排除掉出现滚动条的情况 - // if (!isIE || (ob.scrollable !== true && ob.scrollx !== true && ob.scrolly !== true)) { - return BI.extend({}, ob, {type: "bi.flex_center_adapt"}); - // } - } - if (!BI.isIE() || BI.getIEVersion() >= 8) { - return BI.extend({}, ob, {type: "bi.inline_center_adapt"}); - } - } - return ob; - }); - BI.Plugin.configWidget("bi.vertical_adapt", function (ob) { - var 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 (supportFlex) { - // IE下其实也是可以使用flex布局的,只要排除掉出现滚动条的情况 - // if (!isIE || (ob.scrollable !== true && ob.scrolly !== true)) { - return BI.extend({}, ob, {type: "bi.flex_vertical_adapt"}); - // } - } - if (!BI.isIE() || BI.getIEVersion() > 8) { - return BI.extend({}, ob, {type: "bi.inline_vertical_adapt"}); - } - } - return ob; + // return BI.extend({}, ob, {type: "bi.table_adapt"}); }); + // BI.Plugin.configWidget("bi.center_adapt", function (ob) { + // var 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 (supportFlex) { + // // IE下其实也是可以使用flex布局的,只要排除掉出现滚动条的情况 + // // if (!isIE || (ob.scrollable !== true && ob.scrollx !== true && ob.scrolly !== true)) { + // return BI.extend({}, ob, {type: "bi.flex_center_adapt"}); + // // } + // } + // if (!BI.isIE() || BI.getIEVersion() >= 8) { + // return BI.extend({}, ob, {type: "bi.inline_center_adapt"}); + // } + // } + // return ob; + // }); + // BI.Plugin.configWidget("bi.vertical_adapt", function (ob) { + // var 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 (supportFlex) { + // // IE下其实也是可以使用flex布局的,只要排除掉出现滚动条的情况 + // // if (!isIE || (ob.scrollable !== true && ob.scrolly !== true)) { + // return BI.extend({}, ob, {type: "bi.flex_vertical_adapt"}); + // // } + // } + // if (!BI.isIE() || BI.getIEVersion() > 8) { + // return BI.extend({}, ob, {type: "bi.inline_vertical_adapt"}); + // } + // } + // return ob; + // }); BI.Plugin.configWidget("bi.horizontal_adapt", function (ob) { var justOneItem = (ob.items && ob.items.length <= 1); if (!ob.verticalAlign || ob.verticalAlign === BI.VerticalAlign.TOP) { diff --git a/src/core/wrapper/layout/flex/flex.horizontal.js b/src/core/wrapper/layout/flex/flex.horizontal.js index a618e3a59..557aecfe8 100644 --- a/src/core/wrapper/layout/flex/flex.horizontal.js +++ b/src/core/wrapper/layout/flex/flex.horizontal.js @@ -41,9 +41,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, { position: "relative" }); if (o.columnSize[i] !== "auto") { - if (o.horizontalAlign === BI.HorizontalAlign.Stretch && o.columnSize[i] === "fill") { - w.element.addClass("f-f"); - } else { + if (!(o.horizontalAlign === BI.HorizontalAlign.Stretch && (o.columnSize[i] === "fill" || o.columnSize[i] === ""))) { w.element.addClass("f-s-n"); } } diff --git a/src/core/wrapper/layout/flex/flex.vertical.js b/src/core/wrapper/layout/flex/flex.vertical.js index e78b4a103..52f66df43 100644 --- a/src/core/wrapper/layout/flex/flex.vertical.js +++ b/src/core/wrapper/layout/flex/flex.vertical.js @@ -40,9 +40,7 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, { position: "relative" }); if (o.rowSize[i] !== "auto") { - if (o.verticalAlign === BI.VerticalAlign.Stretch && o.rowSize[i] === "fill") { - w.element.addClass("f-f"); - } else { + if (!(o.verticalAlign === BI.VerticalAlign.Stretch && (o.rowSize[i] === "fill" || o.rowSize[i] === ""))) { w.element.addClass("f-s-n"); } } diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js index 8f4eec3f8..e9ec1c3e3 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js +++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js @@ -37,9 +37,7 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, { position: "relative" }); if (o.columnSize[i] !== "auto") { - if (o.horizontalAlign === BI.HorizontalAlign.Stretch && o.columnSize[i] !== "") { - w.element.addClass("f-f"); - } else { + if (!(o.horizontalAlign === BI.HorizontalAlign.Stretch && (o.columnSize[i] === "fill" || o.columnSize[i] === ""))) { w.element.addClass("f-s-n"); } } @@ -48,6 +46,7 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, { } if (o.columnSize[i] === "fill") { w.element.addClass("f-f"); + this.element.addClass("f-f"); } w.element.addClass("c-e"); if (i === 0) { diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js index 51e657d2a..7f7ce5784 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js +++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js @@ -37,9 +37,7 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, { position: "relative" }); if (o.rowSize[i] !== "auto") { - if (o.verticalAlign === BI.VerticalAlign.Stretch && o.rowSize[i] !== "") { - w.element.addClass("f-f"); - } else { + if (!(o.verticalAlign === BI.VerticalAlign.Stretch && (o.rowSize[i] === "fill" && o.rowSize[i] === ""))) { w.element.addClass("f-s-n"); } } @@ -48,6 +46,7 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, { } if (o.rowSize[i] === "fill") { w.element.addClass("f-f"); + this.element.addClass("f-f"); } w.element.addClass("c-e"); if (i === 0) { diff --git a/src/core/wrapper/layout/layout.inline.js b/src/core/wrapper/layout/layout.inline.js index ea4c6dc5a..1d2528bcd 100644 --- a/src/core/wrapper/layout/layout.inline.js +++ b/src/core/wrapper/layout/layout.inline.js @@ -42,7 +42,7 @@ BI.InlineLayout = BI.inherit(BI.Layout, { "vertical-align": o.verticalAlign }); w.element.addClass("i-item"); - if (o.columnSize[i] === "fill") { + if (o.columnSize[i] === "fill" || o.columnSize[i] === "") { var left = o.hgap + (item.lgap || 0) + (item.hgap || 0), right = o.hgap + (item.rgap || 0) + (item.hgap || 0); for (var k = 0; k < i; k++) { @@ -51,9 +51,11 @@ BI.InlineLayout = BI.inherit(BI.Layout, { for (var k = i + 1; k < o.columnSize.length; k++) { right += o.hgap + o.lgap + o.rgap + o.columnSize[k]; } - w.element.css("min-width", "calc(100% - " + ((left + right) / BI.pixRatio + BI.pixUnit) + ")"); + if (o.columnSize[i] === "fill") { + w.element.css("min-width", "calc(100% - " + ((left + right) / BI.pixRatio + BI.pixUnit) + ")"); + } if (o.horizontalAlign === BI.HorizontalAlign.Stretch) { - w.element.width(0); + w.element.css("max-width", "calc(100% - " + ((left + right) / BI.pixRatio + BI.pixUnit) + ")"); } } if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { diff --git a/src/less/core/wrapper/flex.horizontal.less b/src/less/core/wrapper/flex.horizontal.less index 5ad67aee9..b58fe25c4 100644 --- a/src/less/core/wrapper/flex.horizontal.less +++ b/src/less/core/wrapper/flex.horizontal.less @@ -73,7 +73,7 @@ -o-align-items: center; align-items: center; - &.f-scroll-x { + &.f-scroll-y { /* 09版 */ -webkit-box-align: flex-start; /* 12版 */ diff --git a/src/less/core/wrapper/flex.wrapper.horizontal.less b/src/less/core/wrapper/flex.wrapper.horizontal.less index 6418929cd..a54b68075 100644 --- a/src/less/core/wrapper/flex.wrapper.horizontal.less +++ b/src/less/core/wrapper/flex.wrapper.horizontal.less @@ -76,6 +76,36 @@ } } + &.f-f { + > .f-s-h-w { + -webkit-flex-shrink: 0; + -moz-flex-shrink: 0; + -ms-flex-shrink: 0; + flex-shrink: 0; + -webkit-flex-grow: 1; + -moz-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + + &.h-stretch { + -webkit-flex-shrink: 1; + -moz-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + } + } + } + + &.h-stretch { + > .f-s-h-w { + -webkit-flex-shrink: 1; + -moz-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + max-width: 100%; + } + } + &.h-right { /* 09版 */ -webkit-box-pack: flex-end; @@ -101,6 +131,18 @@ align-items: flex-end; } + &.v-stretch { + /* 09版 */ + -webkit-box-align: stretch; + /* 12版 */ + -webkit-align-items: stretch; + -moz-align-items: stretch; + -ms-align-items: stretch; + -ms-flex-align: stretch; + -o-align-items: stretch; + align-items: stretch; + } + & .f-s-h-w, & .flex-scrollable-horizontal-layout-wrapper { .flex(); .horizontal(); @@ -138,14 +180,14 @@ &.v-middle { ///* 09版 */ - //-webkit-box-align: center; - ///* 12版 */ - //-webkit-align-items: center; - //-moz-align-items: center; - //-ms-align-items: center; - //-ms-flex-align: center; - //-o-align-items: center; - //align-items: center; + -webkit-box-align: center; + /* 12版 */ + -webkit-align-items: center; + -moz-align-items: center; + -ms-align-items: center; + -ms-flex-align: center; + -o-align-items: center; + align-items: center; //> .c-e { // margin-top: auto !important; @@ -181,10 +223,6 @@ align-items: stretch; } - &.h-stretch { - min-width: 100%; - } - &.h-center { ///* 09版 */ //-webkit-box-pack: center; diff --git a/src/less/core/wrapper/flex.wrapper.vertical.less b/src/less/core/wrapper/flex.wrapper.vertical.less index e9ff07f65..c836d9244 100644 --- a/src/less/core/wrapper/flex.wrapper.vertical.less +++ b/src/less/core/wrapper/flex.wrapper.vertical.less @@ -75,6 +75,36 @@ } } + &.f-f { + > .f-s-v-w { + -webkit-flex-shrink: 0; + -moz-flex-shrink: 0; + -ms-flex-shrink: 0; + flex-shrink: 0; + -webkit-flex-grow: 1; + -moz-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + + &.v-middle { + -webkit-flex-shrink: 1; + -moz-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + } + } + } + + &.v-stretch { + > .f-s-v-w { + -webkit-flex-shrink: 1; + -moz-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + max-height: 100%; + } + } + &.h-right { /* 09版 */ -webkit-box-align: flex-end; @@ -147,15 +177,15 @@ //min-width: 100%; &.h-center { - ///* 09版 */ - //-webkit-box-align: center; - ///* 12版 */ - //-webkit-align-items: center; - //-moz-align-items: center; - //-ms-align-items: center; - //-ms-flex-align: center; - //-o-align-items: center; - //align-items: center; + /* 09版 */ + -webkit-box-align: center; + /* 12版 */ + -webkit-align-items: center; + -moz-align-items: center; + -ms-align-items: center; + -ms-flex-align: center; + -o-align-items: center; + align-items: center; //> .c-e { // margin-left: auto !important; @@ -187,10 +217,6 @@ align-items: stretch; } - &.v-stretch { - min-height: 100%; - } - &.v-middle { ///* 09版 */ //-webkit-box-pack: center; diff --git a/src/less/core/wrapper/inline.center.less b/src/less/core/wrapper/inline.center.less index f49646076..019ab0826 100644 --- a/src/less/core/wrapper/inline.center.less +++ b/src/less/core/wrapper/inline.center.less @@ -1,4 +1,4 @@ -.bi-i-c-a, .bi-inline-center-adapt-layout { +.bi-inline-center-adapt-layout { &:after { display: inline-block; width: 0; @@ -7,7 +7,7 @@ content: ' '; } - & > .i-c-a-item, & > .inline-center-adapt-item { + & > .inline-center-adapt-item { display: inline-block; &.x-icon { diff --git a/src/less/core/wrapper/inline.horizontal.less b/src/less/core/wrapper/inline.horizontal.less index fd90fe085..fe8c1cd91 100644 --- a/src/less/core/wrapper/inline.horizontal.less +++ b/src/less/core/wrapper/inline.horizontal.less @@ -1,4 +1,4 @@ -.bi-i-h-a, .bi-inline-horizontal-adapt-layout { +.bi-inline-horizontal-adapt-layout { &:after { display: inline-block; width: 0; @@ -7,7 +7,7 @@ content: ' '; } - & > .i-h-a-item, & > .inline-horizontal-adapt-item { + & > .inline-horizontal-adapt-item { display: inline-block; &.x-icon { diff --git a/src/less/core/wrapper/inline.vertical.less b/src/less/core/wrapper/inline.vertical.less index d91abf2d4..711835326 100644 --- a/src/less/core/wrapper/inline.vertical.less +++ b/src/less/core/wrapper/inline.vertical.less @@ -1,4 +1,4 @@ -.bi-i-v-a, .bi-inline-vertical-adapt-layout { +.bi-inline-vertical-adapt-layout { &:after { display: inline-block; width: 0; @@ -7,7 +7,7 @@ content: ' '; } - & > .i-v-a-item, & > .inline-vertical-adapt-item { + & > .inline-vertical-adapt-item { display: inline-block; &.x-icon {