当前位置：首页 > news >正文

全屏组件封装（react18+antd）

news 2025/8/20 3:28:34

基于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 (<spanstyle={{ 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 (<><ContentclassName="custom-scrollbar"style={{height: isFullScreenState ? "100vh" : `calc(100vh - 64px)`,overflow: "auto",backgroundColor: "#eee",}}><SettingPage /><divstyle={{padding: 24,minHeight: 360,margin: "16px 8px",overflow: "auto",}}><Outlet /></div></Content></>);
};export default MainPage;