辽阳网站建设学校网站建设柚子网络科技

这个 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.valueif (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