全屏组件封装（react18+antd）

基于react+ts封装的公用全屏组件

1、封装组件

在components下面构建FullScreenButton文件：

FullScreenButton/index.tsx

复制代码

import React, { useState, useCallback, useEffect } from "react";
import { FullscreenOutlined, FullscreenExitOutlined } from "@ant-design/icons";
import { Tooltip } from "antd";
const FullScreenButton = ({ targetRef }) => {
  const [isFullScreen, setIsFullScreen] = useState(false);

  const toggleFullScreen = useCallback(() => {
    const parentElement = targetRef.current?.parentElement;

    if (!parentElement) return;

    if (isFullScreen) {
      exitFullScreen();
    } else {
      enterFullScreen(parentElement);
    }

    setIsFullScreen(!isFullScreen);
  }, [isFullScreen, targetRef]);

  const enterFullScreen = (element) => {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  };

  const exitFullScreen = () => {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  };

  useEffect(() => {
    const handleFullScreenChange = () => {
      const parentElement = targetRef.current?.parentElement;
      setIsFullScreen(document.fullscreenElement === parentElement);
    };

    document.addEventListener("fullscreenchange", handleFullScreenChange);
    document.addEventListener("webkitfullscreenchange", handleFullScreenChange);
    document.addEventListener("mozfullscreenchange", handleFullScreenChange);
    document.addEventListener("MSFullscreenChange", handleFullScreenChange);

    return () => {
      document.removeEventListener("fullscreenchange", handleFullScreenChange);
      document.removeEventListener(
        "webkitfullscreenchange",
        handleFullScreenChange,
      );
      document.removeEventListener(
        "mozfullscreenchange",
        handleFullScreenChange,
      );
      document.removeEventListener(
        "MSFullscreenChange",
        handleFullScreenChange,
      );
    };
  }, [targetRef]);

  return (
    <span
      style={{ cursor: "pointer", fontSize: "16px" }}
      onClick={toggleFullScreen}
    >
      <Tooltip placement="bottom" title={isFullScreen ? "退出全屏" : "全屏"}>
        {isFullScreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
      </Tooltip>
    </span>
  );
};

export default FullScreenButton;

2、使用组件

在指定的组件中使用

复制代码

import "./index.less";
import React, { useRef } from "react";
import FullScreenButton from "@/components/FullScreenButton";
const settingPage: React.FC = () => {
  const targenRef = useRef(null);
  return (
    <div ref={targenRef}>
      <div className="settings">
        <div className="bread">面包屑</div>
        <div className="settings-right">
          <FullScreenButton targetRef={targenRef} />
          {/* <span>导航+设置</span> */}
        </div>
      </div>
    </div>
  );
};

export default settingPage;

3、监听操作（根据需要设定）

在父组件中监听是否放大（因为涉及到高度问题，最好是监听下根据是否放大来修改）

复制代码

import React, { useRef, useState, useEffect } from "react";
import { Layout } from "antd";
import { Outlet } from "react-router-dom";
import "./index.less";
import SettingPage from "@/components/setting";
import isFullScreen from "@/utils/isFullScreen";
const { Content } = Layout;
const MainPage: React.FC = () => {
  const [isFullScreenState, setIsFullScreenState] = useState(isFullScreen());
  useEffect(() => {
    const handleFullScreenChange = () => {
      setIsFullScreenState(isFullScreen());
    };

    document.addEventListener("fullscreenchange", handleFullScreenChange);
    document.addEventListener("webkitfullscreenchange", handleFullScreenChange);
    document.addEventListener("mozfullscreenchange", handleFullScreenChange);
    document.addEventListener("MSFullscreenChange", handleFullScreenChange);

    // 清理函数
    return () => {
      document.removeEventListener("fullscreenchange", handleFullScreenChange);
      document.removeEventListener(
        "webkitfullscreenchange",
        handleFullScreenChange,
      );
      document.removeEventListener(
        "mozfullscreenchange",
        handleFullScreenChange,
      );
      document.removeEventListener(
        "MSFullscreenChange",
        handleFullScreenChange,
      );
    };
  }, []);
  return (
    <>
      <Content
        className="custom-scrollbar"
        style={{
          height: isFullScreenState ? "100vh" : `calc(100vh - 64px)`,
          overflow: "auto",
          backgroundColor: "#eee",
        }}
      >
        <SettingPage />
        <div
          style={{
            padding: 24,
            minHeight: 360,
            margin: "16px 8px",
            overflow: "auto",
          }}
        >
          <Outlet />
        </div>
      </Content>
    </>
  );
};

export default MainPage;

注意事项：

1、封装的组件中放大的是父组件，可以根据具体需要修改parentElement

2、使用的时候通过ref获取dom并且通过父传子的方式传给封装组件

3、监听是否放大了，修改父盒子的高度