用于处理元素的全屏显示和退出全屏操作--useFullScreen

这个 useFullScreen 函数是一个自定义的 Vue Hooks，用于处理元素的全屏显示和退出全屏操作。它通过 ref 来引用需要全屏的元素，并提供了一个 handleFullScreen 方法来触发全屏或退出全屏。此外，它还提供了 getFullscreenElement 方法来获取当前全屏的元素，以及 fullscreenchange 和 watchFullListen 方法来处理全屏状态的变化。

/*
 * @Author: 寒露丶
 * @Date: 2025-01-02 10:59:52
 * @Description: desc
 */

import { ref } from 'vue'

export function useFullScreen() {
  // 需要全屏的元素
  const boxRefs = ref<any>()
  // 全屏状态
  const fullscreen = ref<boolean>(false)

  /**
   * 触发全屏方法
   * @param id
   */
  function handleFullScreen(id?: string) {
    let el = boxRefs.value
    if (boxRefs.value?.filter) {
      el = boxRefs.value?.filter((item: { classList: Iterable<unknown> | null | undefined }) => [...new Set(item.classList)].includes(`ref${id}`))[0]
    }
    // 判断是否已经是全屏
    // 如果是全屏，退出
    if (fullscreen.value) {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if ((document as any).webkitCancelFullScreen) {
        ;(document as any).webkitCancelFullScreen()
      } else if ((document as any).mozCancelFullScreen) {
        ;(document as any).mozCancelFullScreen()
      } else if ((document as any).msExitFullscreen) {
        ;(document as any).msExitFullscreen()
      }
    } else {
      // 否则，进入全屏
      if (el.requestFullscreen) {
        el.requestFullscreen()
      } else if (el.webkitRequestFullScreen) {
        el.webkitRequestFullScreen()
      } else if (el.mozRequestFullScreen) {
        el.mozRequestFullScreen()
      } else if (el.msRequestFullscreen) {
        // IE11
        el.msRequestFullscreen()
      }
      watchFullListen(el)
    }
    // 改变当前全屏状态
    fullscreen.value = !fullscreen.value
  }

  /**
   * 获取全屏状态
   */
  function getFullscreenElement() {
    const docm: any = document
    return docm['fullscreenElement'] || docm['mozFullScreenElement'] || docm['msFullScreenElement'] || docm['webkitFullscreenElement'] || null
  }

  /**
   * 全屏状态切换方法，当为缩小时取消监听。
   */
  function fullscreenchange() {
    if (getFullscreenElement() == null) {
      fullscreen.value = false
      document.removeEventListener('fullscreenchange', fullscreenchange)
    }
  }

  /**
   * 监听全屏元素的切换，包含 esc、F11、双击键
   * @param el
   */
  function watchFullListen(el: any) {
    // 全屏时添加监听
    if (el.requestFullscreen) {
      document.addEventListener('fullscreenchange', fullscreenchange)
    }
  }

  return {
    fullscreen,
    handleFullScreen,
    boxRefs,
  }
}

缺点分析：

代码复用性： watchFullListen 和 fullscreenchange 方法的逻辑有些重复，可以考虑将它们合并或者提取公共部分。
**兼容性处理：**虽然代码中已经对不同浏览器的全屏API进行了兼容处理，但是可以进一步封装这些兼容性处理，使得代码更加简洁。
**错误处理：**在尝试进入或退出全屏时，如果操作失败，代码中没有提供错误处理机制。
类型检查： boxRefs 被定义为ref<any>，这可能导致类型检查不严格。可以考虑使用更具体的类型。

完善后的代码

import { ref, onMounted, onUnmounted } from 'vue'

export function useFullScreen() {
  // 需要全屏的元素
  const boxRefs = ref<HTMLElement | null>(null)
  // 全屏状态
  const fullscreen = ref<boolean>(false)

  /**
   * 触发全屏方法
   * @param id
   */
  function handleFullScreen(id?: string) {
    if (!boxRefs.value) return
    const el = getTargetElement(id)
    // 判断是否已经是全屏
    // 如果是全屏，退出
    if (fullscreen.value) {
      exitFullscreen()
    } else {
      // 否则，进入全屏
      requestFullscreen(el)
      watchFullListen(el)
    }
    // 改变当前全屏状态
    fullscreen.value = !fullscreen.value
  }

  /**
   * 获取全屏状态
   */
  function getFullscreenElement() {
    const docm: any = document
    return docm['fullscreenElement'] || docm['mozFullScreenElement'] || docm['msFullScreenElement'] || docm['webkitFullscreenElement'] || null
  }

  /**
   * 全屏状态切换方法，当为缩小时取消监听。
   */
  function fullscreenchange() {
    if (getFullscreenElement() == null) {
      fullscreen.value = false
      document.removeEventListener('fullscreenchange', fullscreenchange)
    }
  }

  /**
   * 监听全屏元素的切换，包含 esc、F11、双击键
   * @param el
   */
  function watchFullListen(el: HTMLElement) {
    // 全屏时添加监听
    if (el.requestFullscreen) {
      document.addEventListener('fullscreenchange', fullscreenchange)
    }
  }

  /**
   * 根据id获取目标元素
   * @param id
   * @returns
   */
  function getTargetElement(id?: string) {
    if (id && boxRefs.value?.filter) {
      return boxRefs.value?.filter((item: { classList: Iterable<unknown> | null | undefined }) => [...new Set(item.classList)].includes(`ref${id}`))[0]
    }
    return boxRefs.value
  }

  /**
   * 尝试进入全屏
   * @param el
   */
  function requestFullscreen(el: HTMLElement) {
    if (el.requestFullscreen) {
      el.requestFullscreen()
    } else if (el.webkitRequestFullScreen) {
      el.webkitRequestFullScreen()
    } else if (el.mozRequestFullScreen) {
      el.mozRequestFullScreen()
    } else if (el.msRequestFullscreen) {
      // IE11
      el.msRequestFullscreen()
    }
  }

  /**
   * 尝试退出全屏
   */
  function exitFullscreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if ((document as any).webkitCancelFullScreen) {
      ;(document as any).webkitCancelFullScreen()
    } else if ((document as any).mozCancelFullScreen) {
      ;(document as any).mozCancelFullScreen()
    } else if ((document as any).msExitFullscreen) {
      ;(document as any).msExitFullscreen()
    }
  }

  // 组件挂载时，初始化全屏状态
  onMounted(() => {
    fullscreen.value = getFullscreenElement() !== null
  })

  // 组件卸载时，移除全屏状态监听
  onUnmounted(() => {
    document.removeEventListener('fullscreenchange', fullscreenchange)
  })

  return {
    fullscreen,
    handleFullScreen,
    boxRefs,
  }
}