全屏组件封装（react18+antd）
基于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 = useState(false);
const toggleFullScreen = useCallback(() => {
const parentElement = targetRef.current?.parentElement;
if (!parentElement) return;
if (isFullScreen) {
exitFullScreen();
} else {
enterFullScreen(parentElement);
}
setIsFullScreen(!isFullScreen);
}, );
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,
);
};
}, );
return (
<span
style={{ 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 = 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、监听是否放大了，修改父盒子的高度
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]