全屏API及vue3 hook封裝

Shapeying發表於2023-11-23
APIVueHook封裝

最近在一個大屏專案遇到一個需求：使用者可以透過一個按鈕，觸發頁面部分模組全屏。透過以下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.

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

相關文章