Browse Source

update

research/test
dailer 1 year ago
parent
commit
ebaa2fdf09
  1. 47
      packages/fineui/src/core/platform/web/config.js

47
packages/fineui/src/core/platform/web/config.js

@ -3,7 +3,8 @@ import { Providers } from "../../5.inject";
import { Plugin } from "../../6.plugin"; import { Plugin } from "../../6.plugin";
import { isSupportCss3, isIE, getIEVersion } from "../../platform/web"; import { isSupportCss3, isIE, getIEVersion } from "../../platform/web";
import { HorizontalAlign, VerticalAlign } from "../../constant"; import { HorizontalAlign, VerticalAlign } from "../../constant";
import { FlexCenterLayout, FlexHorizontalLayout, VerticalLayout, import {
FlexCenterLayout, FlexHorizontalLayout, VerticalLayout,
FlexVerticalLayout, TdLayout, InlineLayout, FlexVerticalLayout, TdLayout, InlineLayout,
FloatHorizontalFillLayout, ResponsiveInlineLayout, FloatHorizontalFillLayout, ResponsiveInlineLayout,
InlineCenterAdaptLayout, FlexVerticalCenterAdapt, InlineCenterAdaptLayout, FlexVerticalCenterAdapt,
@ -26,7 +27,7 @@ import { HalfButton } from "@/case";
// 1、支持flex的浏览器下使用flex布局 // 1、支持flex的浏览器下使用flex布局
// 2、不支持flex的浏览器下使用inline布局 // 2、不支持flex的浏览器下使用inline布局
// 3、当列宽既需要自动列宽又需要自适应列宽时,inline布局也处理不了了。当横向出滚动条时使用table布局,不出滚动条时使用float布局 // 3、当列宽既需要自动列宽又需要自适应列宽时,inline布局也处理不了了。当横向出滚动条时使用table布局,不出滚动条时使用float布局
let _isSupportFlex, _isSupportGrid; let _isSupportFlex, _isSupportGrid, _isSupportSticky;
function isSupportFlex() { function isSupportFlex() {
if (!_isSupportFlex) { if (!_isSupportFlex) {
@ -45,7 +46,7 @@ function isSupportGrid() {
} }
// 判断浏览器是否支持sticky 属性 // 判断浏览器是否支持sticky 属性
const isSupportSticky = (function () { const innerSupportSticky = function() {
const vendorList = ["", "-webkit-", "-ms-", "-moz-", "-o-"], const vendorList = ["", "-webkit-", "-ms-", "-moz-", "-o-"],
vendorListLength = vendorList.length, vendorListLength = vendorList.length,
stickyElement = document.createElement("div"); stickyElement = document.createElement("div");
@ -57,7 +58,15 @@ const isSupportSticky = (function () {
} }
return false; return false;
}()); };
// 判断浏览器是否支持sticky 属性
const isSupportSticky = function() {
if (_isSupportSticky == null) {
_isSupportSticky = innerSupportSticky();
}
return _isSupportSticky;
};
const configWidget = Plugin.configWidget; const configWidget = Plugin.configWidget;
@ -74,7 +83,7 @@ configWidget("bi.horizontal", ob => {
} }
return extend({ return extend({
scrollx: true, scrollx: true
}, ob, { type: InlineLayout.xtype }); }, ob, { type: InlineLayout.xtype });
}); });
configWidget("bi.vertical", ob => { configWidget("bi.vertical", ob => {
@ -90,15 +99,15 @@ configWidget("bi.vertical", ob => {
return { return {
type: InlineLayout.xtype, type: InlineLayout.xtype,
horizontalAlign: ob.horizontalAlign, horizontalAlign: ob.horizontalAlign,
items: [item], items: [item]
}; };
}), })
}); });
} }
if (ob.verticalAlign === VerticalAlign.Stretch) { if (ob.verticalAlign === VerticalAlign.Stretch) {
if (isSupportFlex()) { if (isSupportFlex()) {
return extend({ return extend({
horizontalAlign: HorizontalAlign.Stretch, horizontalAlign: HorizontalAlign.Stretch
}, ob, { type: FlexVerticalLayout.xtype }); }, ob, { type: FlexVerticalLayout.xtype });
} }
} }
@ -128,12 +137,12 @@ configWidget("bi.inline", ob => {
// 宽度是不是受限 // 宽度是不是受限
if ((ob.scrollable !== true && ob.scrollx !== true) || ob.horizontalAlign === HorizontalAlign.Stretch) { if ((ob.scrollable !== true && ob.scrollx !== true) || ob.horizontalAlign === HorizontalAlign.Stretch) {
return extend({ return extend({
verticalAlign: VerticalAlign.Top, verticalAlign: VerticalAlign.Top
}, ob, { type: FloatHorizontalFillLayout.xtype }); }, ob, { type: FloatHorizontalFillLayout.xtype });
} }
return extend({ return extend({
horizontalAlign: HorizontalAlign.Stretch, horizontalAlign: HorizontalAlign.Stretch
}, ob, { type: TableAdaptLayout.xtype }); }, ob, { type: TableAdaptLayout.xtype });
} }
if (Providers.getProvider(SystemProvider.xtype).getResponsiveMode()) { if (Providers.getProvider(SystemProvider.xtype).getResponsiveMode()) {
@ -179,18 +188,18 @@ configWidget("bi.horizontal_adapt", ob => {
// 主要出现在center_adapt或者horizontal_adapt的场景,或者主动设置horizontalAlign的场景 // 主要出现在center_adapt或者horizontal_adapt的场景,或者主动设置horizontalAlign的场景
if (isAdapt) { if (isAdapt) {
return extend({ return extend({
horizontalAlign: HorizontalAlign.Center, horizontalAlign: HorizontalAlign.Center
}, ob, { type: TableAdaptLayout.xtype }); }, ob, { type: TableAdaptLayout.xtype });
} }
if (supportFlex) { if (supportFlex) {
return extend({ return extend({
horizontalAlign: HorizontalAlign.Center, horizontalAlign: HorizontalAlign.Center,
scrollx: false, scrollx: false
}, ob, { type: FlexHorizontalLayout.xtype }); }, ob, { type: FlexHorizontalLayout.xtype });
} }
return extend({ return extend({
horizontalAlign: HorizontalAlign.Center, horizontalAlign: HorizontalAlign.Center
}, ob, { type: TableAdaptLayout.xtype }); }, ob, { type: TableAdaptLayout.xtype });
}); });
@ -210,14 +219,14 @@ configWidget("bi.horizontal_fill", ob => {
return extend({ return extend({
horizontalAlign: HorizontalAlign.Stretch, horizontalAlign: HorizontalAlign.Stretch,
verticalAlign: VerticalAlign.Stretch, verticalAlign: VerticalAlign.Stretch,
scrollx: false, scrollx: false
}, ob, { type: FlexHorizontalLayout.xtype }); }, ob, { type: FlexHorizontalLayout.xtype });
} }
if ((ob.horizontalAlign && ob.horizontalAlign !== HorizontalAlign.Stretch) || (ob.scrollable === true || ob.scrollx === true)) { if ((ob.horizontalAlign && ob.horizontalAlign !== HorizontalAlign.Stretch) || (ob.scrollable === true || ob.scrollx === true)) {
// 宽度不受限,要用table布局 // 宽度不受限,要用table布局
return extend({ return extend({
horizontalAlign: HorizontalAlign.Stretch, horizontalAlign: HorizontalAlign.Stretch,
verticalAlign: VerticalAlign.Stretch, verticalAlign: VerticalAlign.Stretch
}, ob, { type: TableLayout.xtype }); }, ob, { type: TableLayout.xtype });
} }
@ -228,14 +237,14 @@ configWidget("bi.vertical_fill", ob => {
return extend({ return extend({
horizontalAlign: HorizontalAlign.Stretch, horizontalAlign: HorizontalAlign.Stretch,
verticalAlign: VerticalAlign.Stretch, verticalAlign: VerticalAlign.Stretch,
scrolly: false, scrolly: false
}, ob, { type: FlexVerticalLayout.xtype }); }, ob, { type: FlexVerticalLayout.xtype });
} }
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) { if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 有滚动条,降级到table布局处理 // 有滚动条,降级到table布局处理
return extend({}, ob, { return extend({}, ob, {
type: TdLayout.xtype, type: TdLayout.xtype,
items: map(ob.items, (i, item) => [item]), items: map(ob.items, (i, item) => [item])
}); });
} }
let hasAuto = false; let hasAuto = false;
@ -258,12 +267,12 @@ configWidget("bi.vertical_fill", ob => {
return extend({}, ob, { type: VTapeLayout.xtype }); return extend({}, ob, { type: VTapeLayout.xtype });
}); });
configWidget("bi.horizontal_sticky", ob => { configWidget("bi.horizontal_sticky", ob => {
if (!isSupportSticky) { if (!isSupportSticky()) {
return extend({ scrollx: true }, ob, { type: HorizontalFillLayout.xtype }); return extend({ scrollx: true }, ob, { type: HorizontalFillLayout.xtype });
} }
}); });
configWidget("bi.vertical_sticky", ob => { configWidget("bi.vertical_sticky", ob => {
if (!isSupportSticky) { if (!isSupportSticky()) {
return extend({ scrolly: true }, ob, { type: VerticalFillLayout.xtype }); return extend({ scrolly: true }, ob, { type: VerticalFillLayout.xtype });
} }
}); });

Loading…
Cancel
Save