React实现组件全屏化
介绍
本文基于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的项目里面,给大家看看效果。
这样,我们做到了只放大编辑器
的效果,隐藏掉了其他不重要的部分(左侧部分)。
存在的问题
这样还远远不够,里面还有一些细节要优化
。
- 默认背景为黑色,不友好,我们需要设置样式
- 我们应该在全屏模式把编辑器高度变大
- 还有暗坑,待会再说
各个击破
背景色
我们使用的这个库,会默认包裹一个全局的
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实现组件全屏化的更多相关文章
- 弹出iframe内嵌页面元素到父页面并全屏化
(注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题) ...
- html5下F11全屏化的几点注意
1.实现全屏化 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestF ...
- WPF解决界面全屏化但不遮挡任务栏的问题
原文:WPF解决界面全屏化但不遮挡任务栏的问题 学习C#有一段时间了,现在跟着做项目,碰到有个客户端界面总是全屏,对于客户来说没有任务栏很不习惯,所以做了些略微的修改 </pre>&l ...
- HTML5 全屏化操作功能
由于项目中用到了全屏化挫折功能,查看了API后写了一个简单的全屏化model <!DOCTYPE html> <html> <head> <meta http ...
- [Winform]Media Player组件全屏播放的设置
摘要 在设置程序开始运行时,让视频全屏播放时,直接设置 windowsMediaPlay.fullScreen = true; 会报错,代码如下 windowsMediaPlay.URL = _vid ...
- html页面全屏化显示
<html><head><script>// toggle full screen function toggleFullScreen() { if (!docum ...
- js控制浏览器全屏
HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API element.requestFullScree ...
- 点击图片video全屏
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- html5实现全屏的api方法
参考地址 [进入和退出全屏] // Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); docum ...
随机推荐
- ES6扩展——对象的扩展(简洁表示法与属性名表达式)
1.简洁表达法. 当属性名与属性值相同时,可省略属性值:例如:{name : name}可以写成 {name} 属性方法中,可省略冒号与function,直接 属性名(){}即可.例如{say : f ...
- 30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)
前言 本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性.框架的原理以问题的形式进行整理汇总,意在帮助作者及读者自测下 Vue 掌握的程度.本文章节结构以从易到难进行组织,建议读者按章节顺序 ...
- grpc服务发现与负载均衡
前言 在后台服务开发中,高可用性是构建中核心且重要的一环.服务发现(Service discovery)和负载均衡(Load Balance)一直都是我关注的话题.今天来谈一下我在实际中是如何理解及落 ...
- 微信支付 V3 开发教程(一):初识 Senparc.Weixin.TenPayV3
前言 我在 9 年前发布了 Senparc.Weixin SDK 第一个开源版本,一直维护至今,如今 Stras 已经破 7K,这一路上得到了 .NET 社区的积极响应和支持,也受到了非常多的宝贵建议 ...
- java基础之ThreadLocal
早在JDK 1.2的版本中就提供java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.使用这个工具类可以很简洁地编写出优美的多线程程序.Thr ...
- uni-app中websocket的使用 断开重连、心跳机制
前言 最近关于H5和APP的开发中使用到了webSocket,由于web/app有时候会出现网络不稳定或者服务端主动断开,这时候导致消息推送不了的情况,需要客户端进行重连.查阅资料后发现了一个心跳机制 ...
- Python习题集(六)
每天一习题,提升Python不是问题!!有更简洁的写法请评论告知我! https://www.cnblogs.com/poloyy/category/1676599.html 题目 ''' 问题1.对 ...
- IPSEC的实现方式
IPSEC的实现方式 在IPSEC通信中涉及到一个重要方面,那就是如何定义要保护的数据流(又称为感兴趣流).这不仅涉及到IPSEC最终要保护哪部分数据,还关系到IPSEC的实现方式,因此有必要把感兴趣 ...
- SpringSecurity-Shiro-初见
目录 简介 实战环境搭建 SpringSecurity 认证和授权 权限控制和注销 记住我 Shiro 快速上手 shiro整合mybais 简介 在 Web 开发中,安全一直是非常重要的一个方面. ...
- go实现堆排序、快速排序、桶排序算法
一. 堆排序 堆排序是利用堆这种数据结构而设计的一种排序算法.以大堆为例利用堆顶记录的是最大关键字这一特性,每一轮取堆顶元素放入有序区,就类似选择排序每一轮选择一个最大值放入有序区,可以把堆排序看成是 ...