当前位置：首页 > news >正文

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

news 来源：原创 2025/5/11 10:43:08

这个 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