diff --git a/js/utils/helper.ts b/js/utils/helper.ts index c3c99827d7..14a1bd4c76 100644 --- a/js/utils/helper.ts +++ b/js/utils/helper.ts @@ -94,6 +94,28 @@ export function getIEVersion() { return Number.MAX_SAFE_INTEGER; } +/** + * Safari Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5 Safari/605.1.15 + * FireFox Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/114.0 + * Chrome Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36 + * Chrome 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.3 + * 搜狗 Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.87 Safari/537.36 SE 2.X MetaSr 1. + * 360 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.6045.9 Safari/537.36 QIHU 360EE + */ +export function getFlexGapPolyFill() { + if (typeof navigator === 'undefined' || !navigator) return false; + const ua = navigator.userAgent; + const chromeMatch = ua.match(/AppleWebKit.+Chrome\/(.+) Safari\/.+/i); + if (Number(chromeMatch?.[1]?.split('.')[0]) < 100) return true; + const safariMatch = ua.match(/AppleWebKit.+Version\/(.+) Safari\/.+/i); + if (Number(safariMatch?.[1]?.split('.')[0]) < 12) return true; + const ieVersion = getIEVersion(); + if (ieVersion <= 11) return true; + const fireFoxMatch = ua.match(/Firefox\/(.+)/i); + if (Number(fireFoxMatch?.[1]?.split('.')[0]) < 100) return true; + return false; +} + /** * 计算字符串字符的长度并可以截取字符串。 * @param str 传入字符串 diff --git a/style/web/components/space/_index.less b/style/web/components/space/_index.less index 6b91d890f9..3d44e0ece4 100644 --- a/style/web/components/space/_index.less +++ b/style/web/components/space/_index.less @@ -33,3 +33,33 @@ } } } + +.@{prefix}-space.@{prefix}-space--break-line { + flex-wrap: wrap; +} + +.@{prefix}-space { + &.@{prefix}-space--polyfill { + display: flex; + + &.@{prefix}-space-horizontal, + &.@{prefix}-space--break-line { + margin-left: calc(-1 * var(--column-gap, 0)); + } + + &.@{prefix}-space-vertical, + &.@{prefix}-space--break-line { + margin-top: calc(-1 * var(--row-gap, 0)); + } + } + + &.@{prefix}-space--polyfill.@{prefix}-space-horizontal > *, + &.@{prefix}-space--polyfill.@{prefix}-space--break-line > * { + margin-left: var(--column-gap); + } + + &.@{prefix}-space--polyfill.@{prefix}-space-vertical > *, + &.@{prefix}-space--polyfill.@{prefix}-space--break-line > * { + margin-top: var(--row-gap); + } +}