全屏API及vue3 hook封装

最近在一个大屏项目遇到一个需求：用户可以通过一个按钮，触发页面部分模块全屏。通过以下API可以实现：

Element.requestFullscreen()方法用于发出异步请求使元素进入全屏模式。

且全屏状态变化会触发以下事件：

fullscreenchange 事件会在浏览器进入或退出全屏模式后立即触发。

基于以上API和事件，封装了一个简单的全屏hook：

• 响应式的全屏状态
• 可以指定元素进入/退出全屏模式

import { onMounted, onUnmounted, ref } from "vue";
export default function useFullScreen() {
 // 响应式全局状态
 const isFullScreen = ref<boolean>(!!document.fullscreenElement);
 function fullscreenchanged() {
 // 如果有元素处于全屏模式，则 document.fullscreenElement 将指向该元素。如果没有元素处于全屏模式，则该属性的值为 null。
 if (document.fullscreenElement) {
 isFullScreen.value = true;
 } else {
 isFullScreen.value = false;
 }
 }
 onMounted(() => {
 // 通过 ESC 键可以退出全屏
 // 监听全屏事件，判断当前是否处理全屏状态
 document.addEventListener("fullscreenchange", fullscreenchanged);
 });
 onUnmounted(() => {
 document.removeEventListener("fullscreenchange", fullscreenchanged);
 });
 const fullScreen = async (dom?: HTMLElement) => {
 if (!document.fullscreenElement) {
 dom && dom.requestFullscreen();
 }
 };
 const exitFullScreen = () => {
 if (document.fullscreenElement) {
 document.exitFullscreen();
 }
 };
 return {
 isFullScreen,
 fullScreen,
 exitFullScreen,
 };
}

使用示例

const { isFullScreen, fullScreen, exitFullScreen } = useFullScreen();
// 点击触发全屏
const clickHandle = () => {
 dom && fullScreen(dom)
} 

而且需要特别注意，全屏模式，只能由用户行为触发。比如无法一进入页面就由JS直接调起全屏，此时会有错误提示

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

就算是创建一个元素，然后模拟触发点击事件也不行。只能由真实的用户行为触发。