基于react+ts封装的公用全屏组件
在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;
在指定的组件中使用
- 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;
在父组件中监听是否放大(因为涉及到高度问题,最好是监听下根据是否放大来修改)
- 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、监听是否放大了,修改父盒子的高度