原因:有些三方库的组件或者已有的组件ui部分无法调整大小,比如组件是全屏覆盖显示但是在新开发的迭代要求缩小到部分区域显示
解决方法:使用css的属性transform scale,通过绝对定位处理放大或者缩小的处理区域
ini
import React, {
FC, useEffect, useRef, useState,
} from 'react';
import { useSize } from 'ahooks';
import { isEmpty, min } from 'lodash';
import { css } from '@emotion/css';
interface Props {
debug?: boolean
lockMaxWidth?: boolean
lockMaxHeight?: boolean
}
export const AutoScale: FC<React.PropsWithChildren & Props> = ({ children, debug, lockMaxHeight = true, lockMaxWidth = true }) => {
const outsideWrapperRef = useRef<HTMLDivElement>(null);
const insideWrapperRef = useRef<HTMLDivElement>(null);
const outsideSize = useSize(outsideWrapperRef.current?.parentElement);
const insideSize = useSize(insideWrapperRef);
const [scale, setScale] = useState(1);
const [height, setHeight] = useState(0);
const [width, setWidth] = useState(0);
useEffect(() => {
if (isEmpty(insideSize) || isEmpty(outsideSize)) {
return;
}
if (debug) {
console.log(outsideSize);
}
const scaleWidth = outsideSize.width / insideSize.width;
const scaleHeight = outsideSize.height / insideSize.height;
let resultScale;
switch (true) {
case lockMaxWidth && !lockMaxHeight:
resultScale = scaleWidth;
break;
case !lockMaxWidth && lockMaxHeight:
resultScale = scaleHeight;
break;
case lockMaxWidth && lockMaxHeight:
resultScale = min([scaleWidth, scaleHeight]);
break;
default:
resultScale = scaleWidth;
break;
}
setScale(resultScale);
setHeight(insideSize.height * resultScale);
setWidth(insideSize.width * resultScale);
}, [insideSize, outsideSize]);
return (
<div
ref={outsideWrapperRef}
className={css`
position: relative;
width: ${`${width}px` || '100%'};
height: ${`${height}px` || '100%'};
overflow: ${width ? 'initial' : 'hidden'};
`}
>
<div
ref={insideWrapperRef}
className={css`
position: absolute;
top: 0;
left: 0;
transform-origin: left top;
transform: scale(${scale});
`}
>
{children}
</div>
</div>
);
};