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 用法说明

相关推荐
群联云防护小杜14 分钟前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构
ohMyGod_1231 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜051 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界1 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku1 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员1 小时前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句2 小时前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
爱泡脚的鸡腿2 小时前
Web第二次笔记
前端·javascript
良辰未晚2 小时前
Canvas 绘制模糊?那是你没搞懂 DPR!
前端·canvas
Dream耀2 小时前
React合成事件揭秘:高效事件处理的幕后机制
前端·javascript