react项目全屏功能
全屏展示的时候,日期组件不展示在顶部。设置如下:
getPopupContainer={(trigger) => trigger.parentNode}
如果是其他弹出框
getContainer={getContainer()?.current || document.body}
或者设置:getContainer={false} zIndex={100000}
// 监听全屏状态变化
useEffect(() => { const handleFullscreenChange = () => { setIsFullscreen( !!( document.fullscreenElement || (document as any).mozFullScreenElement || (document as any).webkitFullscreenElement || (document as any).msFullscreenElement ) ); }; document.addEventListener("fullscreenchange", handleFullscreenChange); document.addEventListener("mozfullscreenchange", handleFullscreenChange); document.addEventListener("webkitfullscreenchange", handleFullscreenChange); document.addEventListener("MSFullscreenChange", handleFullscreenChange); return () => { document.removeEventListener("fullscreenchange", handleFullscreenChange); document.removeEventListener( "mozfullscreenchange", handleFullscreenChange ); document.removeEventListener( "webkitfullscreenchange", handleFullscreenChange ); document.removeEventListener( "MSFullscreenChange", handleFullscreenChange ); }; }, []); const toggleFullscreen = () => { console.log("当前全屏状态:", isFullscreen); const element = containerRef.current; if (!element) return; if (!isFullscreen) { if (element.requestFullscreen) { element.requestFullscreen(); } else if ((element as any).mozRequestFullScreen) { (element as any).mozRequestFullScreen(); } else if ((element as any).webkitRequestFullscreen) { (element as any).webkitRequestFullscreen(); } else if ((element as any).msRequestFullscreen) { (element as any).msRequestFullscreen(); } } else { if (document.exitFullscreen) { document.exitFullscreen(); } else if ((document as any).mozCancelFullScreen) { (document as any).mozCancelFullScreen(); } else if ((document as any).webkitExitFullscreen) { (document as any).webkitExitFullscreen(); } else if ((document as any).msExitFullscreen) { (document as any).msExitFullscreen(); } } };
如需转载原创文章,请标注原文地址,版权所有!
浙公网安备 33010602011771号