介绍

本文基于React+antd,给大家演示一个完整的全屏demo

起因是开发今天给我提了一个sql编辑器输入框比较小,不支持放大,不太方便。希望能够全屏显示,联想到自己以后可能也会需要,便研究并记录之。

其实我觉得也没有很小(orz)

全屏

大家应该都在web页面里面见过全屏按钮,点击它以后页面就成了全屏,经常会在代码编辑器中出现。

上图就是leetcode全屏后的效果了,省略了菜单等内容

看起来全屏展示分为很多种,我说说我的看法。

  • leetcode这种 它只是页面全屏
  • F11 我们可以按F11进入全屏模式,是chrome自带的,不需要修改代码
  • 改变dom,其实和第一种一样,只不过会隐藏浏览器部分内容

如上图一样,浏览器的躯壳已经不见了。

全屏的用处

全屏的话,似乎当你希望全身心投入阅读的时候比较需要,就好像大家看电影也喜欢全屏一样。主要还是放大组件,让大量输入/阅读操作能够更愉快♀地进行。

安装react-full-screen

// yarn add react-full-screen
npm install react-full-screen --save

使用yarn或者npm安装这个库。官网提供了一些demo,链接在此

编写一个最简单的组件

这里就直接上代码了,代码不多,很好懂。

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { FullscreenOutlined, FullscreenExitOutlined } from "@ant-design/icons";
import { Tooltip, Card, Col, Row } from "antd";
import { FullScreen, useFullScreenHandle } from "react-full-screen"; const App = () => {
// 定义full变量,为的是兼容全屏和非全屏的样式,比如full的时候高度为200,非full高度为100
const [full, setFull] = useState(false);
// 创建一个fullScreen的handle
const handle = useFullScreenHandle(); return (
<div style={{ background: "#ececec", height: 500 }}>
<Row gutter={[8, 8]}>
<Col span={8}>
<Card style={{ height: 500 }}>左侧card</Card>
</Col>
<Col span={16}>
<FullScreen
handle={handle}
onChange={setFull}
style={{ background: "#ffffff" }}
>
<Card style={{ height: 500 }}>
<div>
<Tooltip title="全屏">
<FullscreenOutlined
style={{ fontSize: 16 }}
onClick={() => {
// 点击设置full为true,接着调用handle的enter方法,进入全屏模式
setFull(true);
handle.enter();
}}
/>
</Tooltip>
<Tooltip title="退出全屏">
<FullscreenExitOutlined
style={{ fontSize: 16, marginLeft: 16 }}
// 退出全屏模式并把full设置为false
onClick={() => {
setFull(false);
handle.exit();
}}
/>
</Tooltip>
</div>
<div>假设这是一个编辑器</div>
</Card>
</FullScreen>
</Col>
</Row>
</div>
);
}; ReactDOM.render(<App />, document.getElementById("container"));

展示出来是这个样子,代码里面加入了注释,大家对着看即可。由于codesandbox里面不太支持,所以我放到了一个antd pro的项目里面,给大家看看效果。

这样,我们做到了只放大编辑器的效果,隐藏掉了其他不重要的部分(左侧部分)。

存在的问题

这样还远远不够,里面还有一些细节要优化

  1. 默认背景为黑色,不友好,我们需要设置样式
  2. 我们应该在全屏模式把编辑器高度变大
  3. 还有暗坑,待会再说

各个击破

  • 背景色

    我们使用的这个库,会默认包裹一个全局的div,当全屏的时候,class为.fullscreen.fullscreen-enabled,而非全屏的时候则为fullscreen

    所以我们在全局/组件的样式里面写如下的css即可:

.fullscreen.fullscreen-enabled {
background: #fff;
padding: 24px;
}

可以看到这个样式已经生效了,而且我们加入了padding,这样看起来Card就不会被挤到边上

  • 高度

    我们之前设置了full变量,所以我们修改一下代码,根据full来判断高度。

可以看到盒子的高度已经发生了变化。

扩展部分

如果你以为这就结束了,那就大错特错了。接下来我们说一说暗坑。

在antd组件里面,modal/drawer/message等等都是在body中生成的dom元素,所以我们会遇到什么问题呢

全屏模式根本就看不到对话框/消息提示等。

好在antd提供了对应的参数,控制dom的挂载元素。

  • Modal

    modal可以这么解决,我们首先设置一个full_screen的id:

    注意,这个id一定要在FullScreen组件里面。

    接着我们在Modal.info,Modal组件里面都加入如下参数:

    注意: 这里的modal我的demo里面并没有写,这个属于扩展部分。写一个modal组件也不复杂,大家可以自己尝试下。

  • Modal.info这样的api

Modal.info({
title: 'cud请求参数',
width: 800,
// 注意加上这个
getContainer: document.getElementById('full_screen')
})
  • message

    通过message.config传入getContainer方法:

    这里我没找到很好的办法,每次message.info的时候都需要config一下,还是比较麻烦的。如果作为全局配置则又可能出问题,大家有更好的办法可以留言哈。

React实现组件全屏化的更多相关文章

  1. 弹出iframe内嵌页面元素到父页面并全屏化

    (注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题) ...

  2. html5下F11全屏化的几点注意

    1.实现全屏化 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestF ...

  3. WPF解决界面全屏化但不遮挡任务栏的问题

    原文:WPF解决界面全屏化但不遮挡任务栏的问题 学习C#有一段时间了,现在跟着做项目,碰到有个客户端界面总是全屏,对于客户来说没有任务栏很不习惯,所以做了些略微的修改   </pre>&l ...

  4. HTML5 全屏化操作功能

    由于项目中用到了全屏化挫折功能,查看了API后写了一个简单的全屏化model <!DOCTYPE html> <html> <head> <meta http ...

  5. [Winform]Media Player组件全屏播放的设置

    摘要 在设置程序开始运行时,让视频全屏播放时,直接设置 windowsMediaPlay.fullScreen = true; 会报错,代码如下 windowsMediaPlay.URL = _vid ...

  6. html页面全屏化显示

    <html><head><script>// toggle full screen function toggleFullScreen() { if (!docum ...

  7. js控制浏览器全屏

    HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API element.requestFullScree ...

  8. 点击图片video全屏

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. html5实现全屏的api方法

    参考地址 [进入和退出全屏] // Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); docum ...

随机推荐

  1. 解决移动端click事件300ms延迟的问题

    方法1.部分浏览器的<meta>标签加上width=device-width就能解决. 方法2.引入fastclick.js库 <!DOCTYPE html> <html ...

  2. Linux下修改mysql默认最大连接数

    liunx下修改mysql最大连接数(Centos下测试通过)1.查看当前系统下mysql设置的最大连接数方式一.mysqladmin -uroot -p variables |grep max_co ...

  3. Mybatis原理和代码剖析

    参考资料(官方) Mybatis官方文档: https://mybatis.org/mybatis-3/ Mybatis-Parent : https://github.com/mybatis/par ...

  4. centos7 误用 cat 打开了一个很大的文件

    2021-09-01 1. 问题描述 刚才看到一个文件,出于好奇我就直接用 cat 命令查看了一下,结果文件巨大,一直刷屏停不下来 2. 解决方法 克隆一个窗口,抓一下这个 cat 进程,再使用 ki ...

  5. Python之requests模块-request api

    requests所有功能都能通过"requests/api.py"中的方法访问.它们分别是: requests.request(method, url, **kwargs) req ...

  6. 安装和配置CloudWatchAgent

    文章原文 使用 CloudWatch 代理收集指标和日志 下载 CloudWatch 代理软件包 sudo yum install amazon-cloudwatch-agent 点击查看其他平台软件 ...

  7. NRF52832空中升级DFU

    Secure DFU环境搭建 升级原理,加密原理在此不做描述,详情参考http://www.cnblogs.com/iini/p/9314246.html 1.工具一览 gcc-arm-none-ea ...

  8. Robot Framework 面试题

    什么是 RF 基于可扩展关键字驱动的自动化测试框架 什么是可扩展关键字驱动 可扩展意味着可以自己开发,也可以调用第三方的关键字库 关键字驱动意味着测试用例都是围绕着关键字运行的 RF 的原理(框架?) ...

  9. kernel_thread()和kthread_run()/kthread_create()的根本区别

    0 本质区别 kthread_run()调用kthread_create(), kthread_create()加入链表后,有kthreadd()线程读取链表然后再调用kernel_thread()创 ...

  10. C语言实现有限状态机

    1. 什么是有限状态机 有限状态机在百度百科上的解释为: 有限状态自动机(FSM "finite state machine" 或者FSA "finite state a ...