react 全屏显示实现

概述

因为工作需要在前端使用显示大屏数据,在网上搜索了一阵,发现React有几个例子,但是都没有成功,后面想起之前vue-element-admin的框架有全屏功能,果断去那框架里面翻了翻,最后找到screenfull这个组件,然后通过README直接找到github,感谢大佬开源,直接看说明成功解决问题,博文记录,用以备忘。

依赖组件

screenfull

代码实现

javascript 复制代码
import { Button } from 'antd';
import screenfull from 'screenfull';
import { useRef, useState } from 'react';

const InfoBoard: React.FC = () => {
  const containerHandler = useRef(null)
  const [fullscreen, setFullscreen] = useState(false)

  const handleClick = () => {
    if (screenfull.isEnabled) {
      /**
      * 应用内特定Dom对象全屏
      */
      //screenfull.request(containerHandler.current);
		 
      //整个页面全屏
      screenfull.request();
      setFullscreen(true)
    }
  }

  return (
    <>
      <div ref={containerHandler}>
        <div>
          <button onClick={handleClick}>
            Enter fullscreen
          </button>
        </div>
      </div>
    </>
  );
};

export default InfoBoard;

参考链接

screenfull 用法说明

相关推荐
无我Code3 分钟前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟5 分钟前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light21 分钟前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子24 分钟前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空000024 分钟前
Vue组件通信方式详解
前端·面试
呆呆的心24 分钟前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm29 分钟前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v33 分钟前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
小皮侠35 分钟前
nginx的使用
java·运维·服务器·前端·git·nginx·github
WildBlue37 分钟前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html