【中后台全屏插件和使用方法】

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 ? (
     <FullscreenOutlined
        style={{ color: "aqua", fontSize: "19px" }}
        onClick={toggleFullscreen}
      />
        ) : (
      <FullscreenExitOutlined
         style={{ color: "aqua", fontSize: "19px" }}
         onClick={toggleFullscreen}
      />
  )}

效果如下图：

时小记，终有成。