用于处理元素的全屏显示和退出全屏操作--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.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