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

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

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

/** @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

http://www.mrgr.cn/news/90623.html

相关文章:

  • Word写论文常用操作的参考文章
  • 【2023 K8s CKA】云原生K8s管理员认证课-零基础 考题更新免费学-全新PSI考试系统
  • 考研操作系统----操作系统的概念定义功能和目标(仅仅作为王道哔站课程讲义作用)
  • 学习threejs,使用HemisphereLight半球光
  • 嵌入式EasyRTC实时通话支持海思hi3516cv610,编译器arm-v01c02-linux-musleabi-gcc
  • Docker 存储管理:卷、绑定挂载、临时存储
  • React进阶之React核心源码解析(一)
  • 【CXX】0 Rust与C ++的互操作利器:CXX库介绍与示例
  • 【Linux】Ubuntu Linux 系统——Python集成开发环境
  • C语言中printf()函数,格式输出符
  • C++ ——基础进阶
  • Spring Boot整合DeepSeek实现AI对话(API调用和本地部署)
  • 2025-2-13-4.5 二分法(基础题)
  • 文字转语音(三)FreeTTS实现
  • macOS部署DeepSeek-r1
  • 使用HX搭建UNI-APP云开发项目(适合新手小白与想学云开发的宝子)
  • 【FastAPI 使用FastAPI和uvicorn来同时运行HTTP和HTTPS的Python应用程序】
  • DeepSeek AI 满血版功能集成到WPS或Microsoft Office中
  • cap1:TensorRT介绍及CUDA环境安装
  • 解决QPixmap报“QPixmap::grabWindow(): Unable to copy pixels from framebuffer“问题
  • 【云安全】云原生- K8S etcd 未授权访问
  • 20250212:sigmastar系列2-获取UUID进行授权
  • Radius协议详解
  • Qt的isVisible ()函数介绍和判断窗口是否在当前界面显示
  • Word 公式转 CSDN 插件 发布
  • deepseek本地部署