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