useFullscreen实现全屏的组合式函数

上次更新 2024年10月11日星期五 8:56:56 字数 0 字 时长 0 分钟

/**
 * @description: 用于实现全屏的组合式函数
 * @param {Object} target 全屏的目标元素，默认为document.body
 * @return {*}
 */
export function useFullscreen(target = document.body) {
  const isFullscreen = ref(false) // 状态信息

  /**
   * @description: 实现进入全屏
   * @return {*}
   */
  const enter = () => {
    if (target.requestFullscreen) {
      target.requestFullscreen()
    } else if (target.mozRequestFullScreen) {
      target.mozRequestFullScreen()
    } else if (target.webkitRequestFullscreen) {
      target.webkitRequestFullscreen()
    } else if (target.msRequestFullscreen) {
      target.msRequestFullscreen()
    }

    isFullscreen.value = true
  }

  /**
   * @description: 实现退出全屏
   * @return {*}
   */
  const exit = () => {
    console.log('exit')
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen()
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen()
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
    }
    isFullscreen.value = false
  }

  /**
   * @description: 切换全屏状态
   * @return {*}
   */
  const toggle = () => {
    isFullscreen.value ? exit() : enter()
  }

  // 导出绑定函数
  return {
    enter,
    exit,
    isFullscreen,
    toggle
  }
}