1、utils.ts文件
var document: any = window.document;
export function requestFullScreen(element: any) {
var requestMethod = element.requestFullscreen || element.webkitRequestFullscreen || element.msRequestFullscreen || element.mozRequestFullScreen;
if (requestMethod) {
requestMethod.call(element);
}
}
export function exitFullScreen() {
var exitMethod = document.exitFullscreen || document.webkitExitFullscreen || document.msExitFullscreen || document.mozCancelFullScreen;
if (exitMethod) {
exitMethod.call(document);
}
}
export function isFullscreenElement() {
var isFull = document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement || document.mozFullScreenElement;
return !!isFull;
}
2、index.tsx
import { requestFullScreen, exitFullScreen, isFullscreenElement } from "utils/utils";
const [fullScreen, setFullScreen] = useState(false);
const [originResizeFunc, setOriginResizeFunc] = useState<any>(null);
useEffect(() => {
props.getMenu();
setActiveKey(panes[0].key);
if (window.addEventListener) {
window.addEventListener("resize", onEscCancelFull, false);
} else {
setOriginResizeFunc(window.onresize);
window.onresize = onEscCancelFull;
}
return () => {
if (window.removeEventListener) {
window.removeEventListener("resize", onEscCancelFull, false);
} else {
window.onresize = originResizeFunc;
}
};
}, []);
function onEscCancelFull() {
setFullScreen(isFullscreenElement());
}
return (
{fullScreen ? (<FullscreenExitOutlined onClick={
() => {
exitFullScreen();
}} style={{ fontSize: "24px", marginRight: "10px" }} />)
: (<FullscreenOutlined onClick={
() => {
requestFullScreen(document.body);
}} style={{ fontSize: "24px", marginRight: "10px" }} />)
}
)
3、呈现效果