全屏插件监听进入退出事件

npm install screenfull

 1.监听全屏事件和退出全屏事件

  const handleFullscreenChange = () => {
    // 检查当前是否处于全屏状态
    if (!document.fullscreenElement) {
      console.log('已退出全屏');
      setShow(false)
      setShowIcon(true)
      // 这里可以执行你希望在退出全屏时做的操作
    } else {
      setShow(true)
      setShowIcon(false)
      // console.log('进入全屏');
      // 可以在这里处理进入全屏的逻辑
    }
  };
  // 监听点击事件以触发全屏
  useEffect(() => {
    // 添加监听器,监听全屏变化事件
    document.addEventListener('fullscreenchange', handleFullscreenChange);
    // 清理函数,移除监听器
    return () => {
      document.removeEventListener('fullscreenchange', handleFullscreenChange);
    };
  }, []); // 空依赖数组确保只添加一次监听器


                

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/592334.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

3.11设计模式——Visitor 访问者模式(行为型)

意图 表示一个作用于某对象结构中的各元素的操作。它允许在不改变各元素的类的前提下定义作用于这些元素的新操作。 结构 Visitor(访问者)为该对象结构中ConcreteElement(具体元素)的每一个类声明一个Visit操作,该操…

将java项目上传到GitHub步骤

文章目录 GitHub 作用github如何修改默认分支为master手把手教你把项目上传github上github怎么删除仓库或项目执行到push时报错的解决办法github怎么修改仓库语言 GitHub 作用 GitHub 是一个存放软件代码的网站,主要用于软件开发者存储和管理其项目源代码&#xff…

C++入门系列-类对象模型this指针

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 类对象模型 如何计算类对象的大小 class A { public:void printA(){cout << _a << endl;} private:char _a; }; 算算看&#xff0c;这个类的大小是多少 我们知道…

Unity 性能优化之Profiler窗口(二)怎么看懂这个分析器

提示&#xff1a;仅供参考&#xff0c;有误之处&#xff0c;麻烦大佬指出&#xff0c;不胜感激&#xff01; 文章目录 前言一、Profiler打开方式二、Profile简介添加没有的模块1.点击Profiler Modules&#xff08;分析器模块&#xff09;2.勾选GPU即可 自定义模块1.点击Profile…

JS 笔记9 认识JavaScript

相关内容&#xff1a;JS对象、属性、常用事件处理过程、运算符、if...else、for、…… <script type"text/javascript"></script> type属性用来指定MIME(Multipurpose Internet Mail Extension)类型&#xff0c;主要是告诉浏览器目前使用的是哪一种Scri…

SpringBoot实现Config下自动关联.xml、.properties配置信息的实例教程

本篇文章主要讲解在SpringBoot实现Config下自动关联.xml、.properties配置信息的实例教程。 日期&#xff1a;2024年5月4日 作者&#xff1a;任聪聪 .properties文件调用方法 步骤一、打开我们的 .properties 创建一个demo参数如下图&#xff1a; 步骤二、创建一个config的包&…

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-8.2-链接脚本

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

用python画一个正八边形

1 问题 使用turtle库的turtle.fd()函数和turtle.seth()函数绘制一个边长100的正八边形。 2 方法 1、利用for循环解决如何画出图形中相同的八条边的问题。 2、再利用turtle.fd()函数和turtle.seth()函数画出完整的图形。 代码清单 1 import turtleturtle.pensize(2)d0for i in r…

“科技让广告更精彩”四川迈瑞斯文化传媒有限公司 行业领先的一站式媒体采购供应平台

国际数字影像产业园与园区企业一同推动数字影像技术的创新与发展&#xff0c;为数字影像产业注入新的活力。其中&#xff0c;四川迈瑞斯文化传媒有限公司&#xff08;906&#xff09;作为数字媒体行业的优秀企业&#xff0c;坚持“科技让广告更精彩”的理念&#xff0c;致力于为…

K8S哲学 - statefulSet 灰度发布

kubectl get - 获取资源及配置文件 kubectl get resource 【resourceName -oyaml】 kubectl create - 指定镜像创建或者 指定文件创建 kubectl create resource 【resourceName】 --imagemyImage 【-f my.yaml】 kubectl delete kubectl describe resource resourc…

删除虚拟机存储策略中vSAN默认存储策略

登录vSphere Client&#xff0c;展开左上角设置-策略和配置文件-虚拟机存储策略&#xff0c;可以查看系统默认创建的虚拟机存储策略。这些存储策略由系统自动生成&#xff0c;其中有一部分存储策略仅用于vSAN数据存储&#xff0c;作为vSAN 默认存储策略以应用于&#xff0c;当在…

day-26 H 指数

思路 利用Arrays.sort()函数排序&#xff0c;然后从后面开始计算H指数 解题方法 H指数初始化为零&#xff0c;排序后从数组最后一个元素开始&#xff0c;如果当前元素大于等于H指数&#xff0c;则比较前一个元素&#xff0c;并将H指数加1&#xff0c;直到循环结束。 Code cl…

ubuntu安装LVGL/lv_img_conv并在thinkphp中进行调用生成bin文件

项目需求&#xff1a;需要处理图片成为bin文件&#xff0c;并以二进制的方式传给蓝牙设备&#xff0c;当前仅介绍如何安装&#xff0c;对lvgl功能和简介不做过多描述 项目库地址&#xff1a;https://github.com/lvgl/lv_img_conv 安装过程比较简单 一&#xff0c;确保node.j…

Colab - Introduction to Object Detection using TensorFlow Hub

Colab - Introduction to Object Detection using TensorFlow Hub 1. 源由2. TensorFlow Hub3. 目标检测3.1 举例 - EfficientDet/D4 COCO 20173.2 下载示例图像3.2.1 显示部分样本3.2.2 定义一个将类别ID映射到类别名称和颜色的字典 3.3 加载模型3.4 单张照片执行推理3.4.1 推…

STM32入门学习之ADC

1.ADC在STM32进行数据采集时十分重要。通过ADC可以将外界的数字信号转换为模拟信号&#xff0c;以满足采样的需求。(资料参考于正点原子) STM32 拥有 1~3 个 ADC &#xff08; STM32F101/102 系列只有 1 个 ADC &#xff09;&#xff0c;这些 ADC 可以独立使用&#…

20240504在RK3588的Buildroot系统下使用i2cdetect xxxx ppppp

20240504在RK3588的Buildroot系统下使用i2cdetect 2024/5/4 10:45 rootok3588:/# rootok3588:/# i2cdetect -y 0 0 1 2 3 4 5 6 7 8 9 a b c d e f 00: -- -- -- -- -- -- -- -- 10: -- -- -- -- -- -- -- -- -- -- -- -- -- -- …

2024年第六届先进材料、机械和制造国际会议(AMMM 2024)即将召开!

2024年第六届先进材料、机械和制造国际会议&#xff08;AMMM 2024&#xff09;将于2024年9月6-8日在日本东京举行。AMMM 2024将以国际材料&#xff0c;机械和制造为主题&#xff0c;吸引到来自多个领域的研究人员和学者相聚在一起分享知识&#xff0c;讨论想法&#xff0c;并了…

【系统架构师】-选择题(十二)

1、网闸的作用&#xff1a;实现内网与互联网通信&#xff0c;但内网与互联网不是直连的 2、管理距离是指一种路由协议的路由可信度。15表示该路由信息比较可靠 管理距离越小&#xff0c;它的优先级就越高&#xff0c;也就是可信度越高。 0是最可信赖的&#xff0c;而255则意味…

Typora编辑markdown的技巧

参考视频的B站链接&#xff1a; 手把手教你撰写Typora笔记 在其中选择了常用的部分做标记。 一、标题 使用ctrl数字键&#xff0c;可以快捷的把一行文字变成n级标题 二、源代码模式 可以在下图所示进入 三、设置typora能够自动显示粘贴的图片 打开“偏好设置”&#xff0…

利用 Zstandard (zstd) 高效压缩数据

目录标题 1. Zstandard 压缩算法概述主要特性&#xff1a; 2. Zstandard 在实践中的应用应用案例&#xff1a; 3. 如何使用 Zstandard3.1 安装 Zstandard3.2 使用命令行工具3.3 集成到程序中 4. 总结 在大数据时代&#xff0c;如何高效地存储和传输数据成为了许多企业和开发者面…
最新文章