import { ref } from 'vue';

export function useFullscreen() {
  // 定義一個(gè)響應(yīng)式的 ref 對(duì)象,用于跟蹤當(dāng)前是否處于全屏模式
  const isFullscreen = ref(false);

  // 進(jìn)入全屏模式
  const requestFullscreen = (element) => {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  };

  // 退出全屏模式
  const exitFullscreen = () => {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  };

  // 切換全屏模式
  const toggleFullscreen = (element) => {
    if (isFullscreen.value) {
      exitFullscreen();
      isFullscreen.value = false;
    } else {
      requestFullscreen(element);
      isFullscreen.value = true;
    }
  };

  // 全屏模式變化時(shí)的處理函數(shù)
  const handleFullscreenChange = () => {
    isFullscreen.value = !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
  };

  // 監(jiān)聽(tīng)全屏事件
  document.addEventListener('fullscreenchange', handleFullscreenChange);
  document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
  document.addEventListener('msfullscreenchange', handleFullscreenChange);

  // 返回全屏相關(guān)的功能和狀態(tài)
  return {
    isFullscreen,
    requestFullscreen,
    exitFullscreen,
    toggleFullscreen,
  };
}

<template>
  <div>
    <button @click="toggleFullscreen($refs.fullscreenElement)">
      {{ isFullscreen ? '退出全屏' : '進(jìn)入全屏' }}
    </button>
    <div ref="fullscreenElement">
      <!-- 需要全屏顯示的內(nèi)容 -->
    </div>
  </div>
</template>

<script>
import { useFullscreen } from './useFullscreen';

export default {
  setup() {
    const { isFullscreen, toggleFullscreen } = useFullscreen();

    return {
      isFullscreen,
      toggleFullscreen,
    };
  },
};
</script>