【中后台全屏插件和使用方法】
pnpm install screenfull首先可以通过一个状态用来区分当前页面是否是全屏状态，比如:
// 是否全屏状态
const [isFullScreen, setIsFullScreen] = useState<boolean>(false);接着定义事件触发全屏：
// 点击全屏const toggleFullscreen = (): void => {if (screenfull.isEnabled) {// 切换全屏状态screenfull.toggle();} else {// 处理不支持全屏的情况console.warn("Fullscreen is not supported.");}};接着可以直接在useEffect中处理逻辑并且修改 icon 的状态替换 icon
// 全屏监听useEffect(() => {const handleFullscreenChange = () => {setIsFullScreen(screenfull.isFullscreen);};if (screenfull.isEnabled) {screenfull.on("change", handleFullscreenChange);}return () => {if (screenfull.isEnabled) {screenfull.off("change", handleFullscreenChange);}};}, []);在你的 icon 上处理状态以及事件
{/* 全屏按钮控制 ICON */}{!isFullScreen ? (<FullscreenOutlinedstyle={{ color: "aqua", fontSize: "19px" }}onClick={toggleFullscreen}/>) : (<FullscreenExitOutlinedstyle={{ color: "aqua", fontSize: "19px" }}onClick={toggleFullscreen}/>)}效果如下图：
时小记，终有成。