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

相关推荐
顺丰同城前端技术团队5 分钟前
DeepSeek 国产大模型新标杆
前端·后端·程序员
Java水解6 分钟前
微前端架构:从单体到模块化的前端新革命
前端
Mr_汪9 分钟前
uniapp使用h5的map(已弃用)
前端
前端进阶者12 分钟前
vite调试node_modules下面插件
前端·vite
YaHuiLiang19 分钟前
小微互联网公司与互联网创业公司 -- 学历之殇
前端·后端·面试
用户261245834016122 分钟前
vue学习路线(11.watch对比computed)
前端·vue.js
CAD老兵28 分钟前
前端 Source Map 原理与结构详解
前端
gnip32 分钟前
markdown预览自定义扩展实现
前端·javascript
大猫会长43 分钟前
mac中创建 .command 文件,执行node服务
前端·chrome
旧时光_44 分钟前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js