From c9e085a311777ef693530b7a3139052ec4b5b743 Mon Sep 17 00:00:00 2001 From: guy Date: Wed, 24 Nov 2021 17:39:16 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=93=8D=E5=BA=94=E5=BC=8F?= =?UTF-8?q?=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/dev.html | 74 +++++-------------- src/base/single/label/abstract.label.js | 4 + src/core/platform/web/config.js | 19 +++-- src/core/system.js | 15 +++- .../responsive/responsive.flex.horizontal.js | 47 ++++++++++++ .../responsive.flex.wrapper.horizontal.js | 41 ++++++++++ .../layout/responsive/responsive.inline..js | 65 ++++++++++++++++ src/less/core/wrapper/flex.horizontal.less | 11 +++ .../core/wrapper/flex.wrapper.horizontal.less | 13 ++++ 9 files changed, 226 insertions(+), 63 deletions(-) create mode 100644 src/core/wrapper/layout/responsive/responsive.flex.horizontal.js create mode 100644 src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js create mode 100644 src/core/wrapper/layout/responsive/responsive.inline..js diff --git a/examples/dev.html b/examples/dev.html index 009f32b8d..bf845c987 100644 --- a/examples/dev.html +++ b/examples/dev.html @@ -9,71 +9,35 @@
diff --git a/src/base/single/label/abstract.label.js b/src/base/single/label/abstract.label.js index 8bbfbee15..76fb27fbd 100644 --- a/src/base/single/label/abstract.label.js +++ b/src/base/single/label/abstract.label.js @@ -106,6 +106,7 @@ "line-height": o.height / BI.pixRatio + BI.pixUnit }); json.textAlign = o.textAlign; + delete json.maxWidth; this.text = BI.createWidget(BI.extend(json, { element: this, hgap: o.hgap, @@ -175,6 +176,7 @@ "line-height": o.height / BI.pixRatio + BI.pixUnit }); json.textAlign = o.textAlign; + delete json.maxWidth; this.text = BI.createWidget(BI.extend(json, { element: this, hgap: o.hgap, @@ -251,6 +253,7 @@ "line-height": (o.height - (o.vgap * 2)) / BI.pixRatio + BI.pixUnit }); } + delete json.maxWidth; this.text = BI.createWidget(BI.extend(json, { element: this, hgap: o.hgap, @@ -309,6 +312,7 @@ "line-height": (o.height - (o.vgap * 2)) / BI.pixRatio + BI.pixUnit }); } + delete json.maxWidth; this.text = BI.createWidget(BI.extend(json, { // 2.6 element: this, hgap: o.hgap, diff --git a/src/core/platform/web/config.js b/src/core/platform/web/config.js index f6ce80dfb..e8001d87f 100644 --- a/src/core/platform/web/config.js +++ b/src/core/platform/web/config.js @@ -2,10 +2,9 @@ BI.prepares.push(function () { // 注册布局 // adapt类布局优先级规则 - // 1、在非IE且支持flex的浏览器下使用flex布局 - // 2、IE或者不支持flex的浏览器下使用inline布局 - // 3、在2的情况下如果布局的items大于1的话使用display:table的布局 - // 4、在3的情况下如果IE版本低于8使用table标签布局 + // 1、支持flex的浏览器下使用flex布局 + // 2、不支持flex的浏览器下使用inline布局 + // 3、当列宽既需要自动列宽又需要自适应列宽时，inline布局也处理不了了。当横向出滚动条时使用table布局，不出滚动条时使用float布局 var _isSupportFlex; var isSupportFlex = function () { if (_isSupportFlex == null) { @@ -57,6 +56,9 @@ BI.prepares.push(function () { horizontalAlign: BI.HorizontalAlign.Stretch }, ob, {type: "bi.table_adapt"}); } + if (BI.Providers.getProvider("bi.provider.system").getResponsiveMode()) { + return BI.extend({}, ob, {type: "bi.responsive_inline"}); + } return ob; }); BI.Plugin.configWidget("bi.center_adapt", function (ob) { @@ -145,7 +147,8 @@ BI.prepares.push(function () { type: "bi.td", items: BI.map(ob.items, function (i, item) { return [item]; - })}); + }) + }); }); BI.Plugin.configWidget("bi.left_right_vertical_adapt", function (ob) { @@ -160,9 +163,15 @@ BI.prepares.push(function () { BI.Plugin.configWidget("bi.flex_horizontal", function (ob) { if (ob.scrollable === true || ob.scrollx !== false) { if (ob.hgap > 0 || ob.rgap > 0) {// flex中最后一个margin-right不生效 + if (BI.Providers.getProvider("bi.provider.system").getResponsiveMode()) { + return BI.extend({}, ob, {type: "bi.responsive_flex_scrollable_horizontal"}); + } return BI.extend({}, ob, {type: "bi.flex_scrollable_horizontal"}); } } + if (BI.Providers.getProvider("bi.provider.system").getResponsiveMode()) { + return BI.extend({}, ob, {type: "bi.responsive_flex_horizontal"}); + } }); BI.Plugin.configWidget("bi.flex_vertical", function (ob) { if (ob.scrollable === true || ob.scrollx === true) { diff --git a/src/core/system.js b/src/core/system.js index 3fae2a600..08a872860 100644 --- a/src/core/system.js +++ b/src/core/system.js @@ -7,12 +7,13 @@ !(function () { var system = { dependencies: {}, + responsiveMode: false, size: { // 尺寸 TOOL_BAR_HEIGHT: 24, LIST_ITEM_HEIGHT: 24, TRIGGER_HEIGHT: 24, TOAST_TOP: 10 - }, + } }; var provider = function () { @@ -20,7 +21,11 @@ this.SYSTEM = system; this.setSize = function (opt) { - BI.deepExtend(system, { size: opt }); + BI.deepExtend(system, {size: opt}); + }; + + this.setResponsiveMode = function (mode) { + system.responsiveMode = !!mode; }; this.addDependency = function (moduleId, minVersion, maxVersion) { @@ -41,6 +46,10 @@ return system.size; }, + getResponsiveMode: function () { + return system.responsiveMode; + }, + getDependencies: function () { return system.dependencies; } @@ -52,5 +61,5 @@ })(); BI.prepares.push(function () { - BI.SIZE_CONSANTS = BI.Providers.getProvider('bi.provider.system').getSize(); + BI.SIZE_CONSANTS = BI.Providers.getProvider("bi.provider.system").getSize(); }); diff --git a/src/core/wrapper/layout/responsive/responsive.flex.horizontal.js b/src/core/wrapper/layout/responsive/responsive.flex.horizontal.js new file mode 100644 index 000000000..4d5fa2b27 --- /dev/null +++ b/src/core/wrapper/layout/responsive/responsive.flex.horizontal.js @@ -0,0 +1,47 @@ +/** + * 横向响应式布局 + * Created by GUY on 2016/12/2. + * + * @class BI.ResponsiveFlexHorizontalLayout + * @extends BI.FlexHorizontalLayout + */ +BI.ResponsiveFlexHorizontalLayout = BI.inherit(BI.FlexHorizontalLayout, { + props: function () { + return BI.extend(BI.ResponsiveFlexHorizontalLayout.superclass.props.apply(this, arguments), { + extraCls: "bi-responsive-f-h" + }); + }, + + _addElement: function (i, item) { + var w = BI.ResponsiveFlexHorizontalLayout.superclass._addElement.apply(this, arguments); + var o = this.options; + var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width >= 1 ? null : item.width; + if (o.columnSize.length > 0) { + if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) { + columnSize = null; + } + } + if (columnSize === "fill") { + // 给自适应列设置一个min-width + var length = 0; + var fillCount = 0, autoCount = 0; + for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) { + var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width; + if (cz === "fill") { + fillCount++; + cz = 0; + } else if (cz === "" || BI.isNull(cz)) { + autoCount++; + cz = 0; + } + length += cz; + } + var count = (o.columnSize.length || o.items.length) - fillCount - autoCount; + if (count > 0) { + w.element.css("min-width", length / count / BI.pixRatio + BI.pixUnit); + } + } + return w; + } +}); +BI.shortcut("bi.responsive_flex_horizontal", BI.ResponsiveFlexHorizontalLayout); diff --git a/src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js b/src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js new file mode 100644 index 000000000..665fe9004 --- /dev/null +++ b/src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js @@ -0,0 +1,41 @@ +/** + * 横向响应式布局 + * Created by GUY on 2016/12/2. + * + * @class BI.ResponsiveFlexWrapperHorizontalLayout + * @extends BI.FlexWrapperHorizontalLayout + */ +BI.ResponsiveFlexWrapperHorizontalLayout = BI.inherit(BI.FlexWrapperHorizontalLayout, { + _addElement: function (i, item) { + var w = BI.ResponsiveFlexHorizontalLayout.superclass._addElement.apply(this, arguments); + var o = this.options; + var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width >= 1 ? null : item.width; + if (o.columnSize.length > 0) { + if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) { + columnSize = null; + } + } + if (columnSize === "fill") { + // 给自适应列设置一个min-width + var length = 0; + var fillCount = 0, autoCount = 0; + for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) { + var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width; + if (cz === "fill") { + fillCount++; + cz = 0; + } else if (cz === "" || BI.isNull(cz)) { + autoCount++; + cz = 0; + } + length += cz; + } + var count = (o.columnSize.length || o.items.length) - fillCount - autoCount; + if (count > 0) { + w.element.css("min-width", length / count / BI.pixRatio + BI.pixUnit); + } + } + return w; + } +}); +BI.shortcut("bi.responsive_flex_scrollable_horizontal", BI.ResponsiveFlexWrapperHorizontalLayout); diff --git a/src/core/wrapper/layout/responsive/responsive.inline..js b/src/core/wrapper/layout/responsive/responsive.inline..js new file mode 100644 index 000000000..7b6e97e5b --- /dev/null +++ b/src/core/wrapper/layout/responsive/responsive.inline..js @@ -0,0 +1,65 @@ +/** + * 横向响应式布局 + * Created by GUY on 2016/12/2. + * + * @class BI.ResponsiveInlineLayout + * @extends BI.InlineLayout + */ +BI.ResponsiveInlineLayout = BI.inherit(BI.InlineLayout, { + _addElement: function (i, item) { + var o = this.options; + var w = BI.InlineLayout.superclass._addElement.apply(this, arguments); + var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width >= 1 ? null : item.width; + if (o.columnSize.length > 0) { + if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) { + columnSize = null; + } + } + if (columnSize > 0) { + w.element.width(columnSize < 1 ? ((columnSize * 100).toFixed(1) + "%") : (columnSize / BI.pixRatio + BI.pixUnit)); + } + w.element.css({ + position: "relative", + "vertical-align": o.verticalAlign + }); + w.element.addClass("i-item"); + if (columnSize === "fill" || columnSize === "") { + var length = o.hgap, czs = 0; + var fillCount = 0, autoCount = 0; + for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) { + var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width; + if (cz === "fill") { + fillCount++; + cz = 0; + } else if (cz === "" || BI.isNull(cz)) { + autoCount++; + cz = 0; + } + length += o.hgap + o.lgap + o.rgap + (o.items[k].lgap || 0) + (o.items[k].rgap || 0) + (o.items[k].hgap || 0) + cz; + czs += cz; + } + if (columnSize === "fill") { + var count = (o.columnSize.length || o.items.length) - fillCount - autoCount; + if (count > 0) { + w.element.css("min-width", czs / count / BI.pixRatio + BI.pixUnit); + } + w.element.css("width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")"); + } + if (o.horizontalAlign === BI.HorizontalAlign.Stretch || !(o.scrollable === true || o.scrollx === true)) { + if (columnSize === "fill") { + w.element.css("max-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")"); + } else { + w.element.css("max-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (autoCount > 1 ? "/" + autoCount : "") + ")"); + } + } + } + this._handleGap(w, item, i); + if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) { + var top = o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0), + bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0); + w.element.css("height", "calc(100% - " + ((top + bottom) / BI.pixRatio + BI.pixUnit) + ")"); + } + return w; + } +}); +BI.shortcut("bi.responsive_inline", BI.ResponsiveInlineLayout); diff --git a/src/less/core/wrapper/flex.horizontal.less b/src/less/core/wrapper/flex.horizontal.less index b58fe25c4..933df5b33 100644 --- a/src/less/core/wrapper/flex.horizontal.less +++ b/src/less/core/wrapper/flex.horizontal.less @@ -62,6 +62,17 @@ -o-flex-wrap: nowrap; flex-wrap: nowrap; + &.bi-responsive-f-h { + /* 09版 */ + /*-webkit-box-lines: multiple;*/ + /* 12版 */ + -webkit-flex-wrap: wrap; + -moz-flex-wrap: wrap; + -ms-flex-wrap: wrap; + -o-flex-wrap: wrap; + flex-wrap: wrap; + } + &.v-middle { /* 09版 */ -webkit-box-align: center; diff --git a/src/less/core/wrapper/flex.wrapper.horizontal.less b/src/less/core/wrapper/flex.wrapper.horizontal.less index a54b68075..420676ea7 100644 --- a/src/less/core/wrapper/flex.wrapper.horizontal.less +++ b/src/less/core/wrapper/flex.wrapper.horizontal.less @@ -269,4 +269,17 @@ flex-grow: 1; } } + + &.bi-responsive-f-h { + & .f-s-h-w { + /* 09版 */ + /*-webkit-box-lines: multiple;*/ + /* 12版 */ + -webkit-flex-wrap: wrap; + -moz-flex-wrap: wrap; + -ms-flex-wrap: wrap; + -o-flex-wrap: wrap; + flex-wrap: wrap; + } + } }