import React, { useEffect, useRef } from 'react';
import styles from './index.less';
/**
*
* @param {*} props
* @returns
*/
const ScalePage = (props) => {
const {
id = '',
style,
className,
containerWidth,
containerHeight,
designDraftWidth = 1920,
designDraftHeight = 900,
priorityFill = 'container', //优先填充 container, width ,height
resize = false,
children,
} = props;
const wrap = useRef();
useEffect(() => {
//初始化自适应
handleScreenAuto();
//绑定自适应函数
if (resize) {
window.onresize = () => handleScreenAuto();
}
//退出大屏后自适应消失
return () => {
if (resize) {
window.onresize = null;
}
};
}, [designDraftWidth, designDraftHeight, priorityFill]);
//数据大屏自适应函数
const handleScreenAuto = () => {
// 设备(浏览器)的宽度
let clientWidth =
containerWidth || document.documentElement.clientWidth || document.body.clientWidth;
let clientHeight =
containerHeight || document.documentElement.clientHeight || document.body.clientHeight;
if (clientWidth === designDraftWidth && clientHeight === designDraftHeight) {
wrap.current.style.transform = '';
return;
}
//根据屏幕的变化适配的比例
if (priorityFill === 'container') {
const scaleX = clientWidth / designDraftWidth;
const scaleY = clientHeight / designDraftHeight;
wrap.current.style.transform = `scale(${scaleX},${scaleY})`;
} else if (priorityFill === 'width') {
const scale = clientWidth / designDraftWidth;
wrap.current.style.transform = `scale(${scale})`;
} else if (priorityFill === 'height') {
const scale = clientHeight / designDraftHeight;
wrap.current.style.transform = `scale(${scale})`;
}
};
return (
<div
id={id}
style={{ ...style, width: `${designDraftWidth}px`, height: `${designDraftHeight}px` }}
className={`${styles.scalePage} ${className}`}
ref={wrap}
>
{children}
</div>
);
};
export default ScalePage;
//.screen {position: absolute;} ScalePage必须为绝对定位
<ScalePage
className={styles.screen}
designDraftWidth={1920}
designDraftHeight={1080}
resize={true}
>
<div>
</div>
</ScalePage>
react---大屏项目屏幕自适应组件---ScalePage
于 2023-08-04 15:48:58 首次发布