全屏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.

就算是創建一個元素，然後模擬觸發點擊事件也不行。只能由真實的用戶行為觸發。