全屏组件封装（react18+antd）

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

在components下面构建FullScreenButton文件：
FullScreenButton/index.tsx

1. import React, { useState, useCallback, useEffect } from "react";
2. import { FullscreenOutlined, FullscreenExitOutlined } from "@ant-design/icons";
3. import { Tooltip } from "antd";
4. const FullScreenButton = ({ targetRef }) => {
5.   const [isFullScreen, setIsFullScreen] = useState(false);
7.   const toggleFullScreen = useCallback(() => {
8.     const parentElement = targetRef.current?.parentElement;
10.     if (!parentElement) return;
12.     if (isFullScreen) {
13.       exitFullScreen();
14.     } else {
15.       enterFullScreen(parentElement);
16.     }
18.     setIsFullScreen(!isFullScreen);
19.   }, [isFullScreen, targetRef]);
21.   const enterFullScreen = (element) => {
22.     if (element.requestFullscreen) {
23.       element.requestFullscreen();
24.     } else if (element.mozRequestFullScreen) {
25.       element.mozRequestFullScreen();
26.     } else if (element.webkitRequestFullscreen) {
27.       element.webkitRequestFullscreen();
28.     } else if (element.msRequestFullscreen) {
29.       element.msRequestFullscreen();
30.     }
31.   };
33.   const exitFullScreen = () => {
34.     if (document.exitFullscreen) {
35.       document.exitFullscreen();
36.     } else if (document.mozCancelFullScreen) {
37.       document.mozCancelFullScreen();
38.     } else if (document.webkitExitFullscreen) {
39.       document.webkitExitFullscreen();
40.     } else if (document.msExitFullscreen) {
41.       document.msExitFullscreen();
42.     }
43.   };
45.   useEffect(() => {
46.     const handleFullScreenChange = () => {
47.       const parentElement = targetRef.current?.parentElement;
48.       setIsFullScreen(document.fullscreenElement === parentElement);
49.     };
51.     document.addEventListener("fullscreenchange", handleFullScreenChange);
52.     document.addEventListener("webkitfullscreenchange", handleFullScreenChange);
53.     document.addEventListener("mozfullscreenchange", handleFullScreenChange);
54.     document.addEventListener("MSFullscreenChange", handleFullScreenChange);
56.     return () => {
57.       document.removeEventListener("fullscreenchange", handleFullScreenChange);
58.       document.removeEventListener(
59.         "webkitfullscreenchange",
60.         handleFullScreenChange,
61.       );
62.       document.removeEventListener(
63.         "mozfullscreenchange",
64.         handleFullScreenChange,
65.       );
66.       document.removeEventListener(
67.         "MSFullscreenChange",
68.         handleFullScreenChange,
69.       );
70.     };
71.   }, [targetRef]);
73.   return (
74.     <span
75.       style={{ cursor: "pointer", fontSize: "16px" }}
76.       onClick={toggleFullScreen}
77.     >
78.       <Tooltip placement="bottom" title={isFullScreen ? "退出全屏" : "全屏"}>
79.         {isFullScreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
80.       </Tooltip>
81.     </span>
82.   );
83. };
85. export default FullScreenButton;

复制代码

2、使用组件

在指定的组件中使用

1. import "./index.less";
2. import React, { useRef } from "react";
3. import FullScreenButton from "@/components/FullScreenButton";
4. const settingPage: React.FC = () => {
5.   const targenRef = useRef(null);
6.   return (
7.     <div ref={targenRef}>
8.       <div className="settings">
9.         <div className="bread">面包屑</div>
10.         <div className="settings-right">
11.           <FullScreenButton targetRef={targenRef} />
12.           {/* <span>导航+设置</span> */}
13.         </div>
14.       </div>
15.     </div>
16.   );
17. };
19. export default settingPage;

复制代码

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

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

1. import React, { useRef, useState, useEffect } from "react";
2. import { Layout } from "antd";
3. import { Outlet } from "react-router-dom";
4. import "./index.less";
5. import SettingPage from "@/components/setting";
6. import isFullScreen from "@/utils/isFullScreen";
7. const { Content } = Layout;
8. const MainPage: React.FC = () => {
9.   const [isFullScreenState, setIsFullScreenState] = useState(isFullScreen());
10.   useEffect(() => {
11.     const handleFullScreenChange = () => {
12.       setIsFullScreenState(isFullScreen());
13.     };
15.     document.addEventListener("fullscreenchange", handleFullScreenChange);
16.     document.addEventListener("webkitfullscreenchange", handleFullScreenChange);
17.     document.addEventListener("mozfullscreenchange", handleFullScreenChange);
18.     document.addEventListener("MSFullscreenChange", handleFullScreenChange);
20.     // 清理函数
21.     return () => {
22.       document.removeEventListener("fullscreenchange", handleFullScreenChange);
23.       document.removeEventListener(
24.         "webkitfullscreenchange",
25.         handleFullScreenChange,
26.       );
27.       document.removeEventListener(
28.         "mozfullscreenchange",
29.         handleFullScreenChange,
30.       );
31.       document.removeEventListener(
32.         "MSFullscreenChange",
33.         handleFullScreenChange,
34.       );
35.     };
36.   }, []);
37.   return (
38.     <>
39.       <Content
40.         className="custom-scrollbar"
41.         style={{
42.           height: isFullScreenState ? "100vh" : `calc(100vh - 64px)`,
43.           overflow: "auto",
44.           backgroundColor: "#eee",
45.         }}
46.       >
47.         <SettingPage />
48.         <div
49.           style={{
50.             padding: 24,
51.             minHeight: 360,
52.             margin: "16px 8px",
53.             overflow: "auto",
54.           }}
55.         >
56.           <Outlet />
57.         </div>
58.       </Content>
59.     </>
60.   );
61. };
63. export default MainPage;

复制代码

  注意事项：
  1、封装的组件中放大的是父组件，可以根据具体需要修改parentElement
  2、使用的时间通过ref获取dom并且通过父传子的方式传给封装组件
  3、监听是否放大了，修改父盒子的高度
   

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。