const isFullscreen = ref(false); const handleFullscreenChange = () => { isFullscreen.value = document.fullscreenElement !== null || document.webkitIsFullScreen; console.log(isFullscreen.value,"_____") }; onMounted(() => { document.addEventListener('fullscreenchange', handleFullscreenChange); document.addEventListener('webkitfullscreenchange', handleFullscreenChange); }); onUnmounted(() => { document.removeEventListener('fullscreenchange', handleFullscreenChange); document.removeEventListener('webkitfullscreenchange', handleFullscreenChange); });
document.fullscreenElement和document.webkitIsFullScreen来判断是否处于全屏状态,监听这两个值来更新是否全屏状态isFullcreen值.
自动退出全屏
下载插件,导入插件,调用退出全屏方法即可实现.
npm install screeenfull
import screenfulls from "screenfull";
screenfulls.exit();.