react---大屏项目屏幕自适应组件---ScalePage

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>