Vue3监听页面是否全屏(监听与自动退出全屏)

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();.