React实现组件全屏化
<h3 id="介绍">介绍</h3><p>本文基于<code>React</code>+<code>antd</code>，给大家演示一个完整的<code>全屏demo</code>。</p>
<p>起因是开发今天给我提了一个<code>sql编辑器输入框</code>比较小，不支持放大，不太方便。希望能够全屏显示，联想到自己以后可能也会需要，便研究并记录之。</p>
<p>其实我觉得也没有很小（orz）</p>
<p><img src="https://static.pity.fun/picture/2021-10-15/1634290485372-image.png" alt="" loading="lazy"></p>
<h3 id="全屏">全屏</h3>
<p>大家应该都在web页面里面见过<code>全屏</code>按钮，点击它以后页面就成了全屏，经常会在<code>代码编辑器</code>中出现。</p>
<p><img src="https://static.pity.fun/picture/2021-10-15/1634289513471-image.png" alt="可以看到有对应的数据出现" loading="lazy"></p>
<p>上图就是leetcode全屏后的效果了，省略了菜单等<code>内容</code>。</p>
<p>看起来全屏展示分为<code>很多种</code>，我说说我的看法。</p>
<ul>
<li>leetcode这种 它只是页面全屏</li>
<li>F11 我们可以按F11进入全屏模式，是chrome自带的，不需要修改代码</li>
<li>改变dom，其实和第一种一样，只不过会隐藏浏览器部分内容</li>
</ul>
<p><img src="https://static.pity.fun/picture/2021-10-15/1634289986997-image.png" alt="" loading="lazy"></p>
<p>如上图一样，<code>浏览器</code>的躯壳已经不见了。</p>
<h3 id="全屏的用处">全屏的用处</h3>
<p>全屏的话，似乎当你希望全身心<code>投入</code>阅读的时候比较需要，就好像大家<code>看电影</code>也喜欢全屏一样。主要还是<code>放大</code>组件，让大量输入/阅读操作能够更愉快♀地进行。</p>
<h3 id="安装react-full-screen">安装react-full-screen</h3>
<pre><code class="language-bash">// yarn add react-full-screen
npm install react-full-screen --save
</code></pre>
<p>使用yarn或者npm安装这个库。官网提供了一些demo，链接在此。</p>
<h3 id="编写一个最简单的组件">编写一个最简单的组件</h3>
<p>这里就直接上代码了，<code>代码</code>不多，很好懂。</p>
<pre><code class="language-javascript">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 = useState(false);
// 创建一个fullScreen的handle
const handle = useFullScreenHandle();
return (
<div style={{ background: "#ececec", height: 500 }}>
<Row gutter={}>
<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"));
</code></pre>
<p><img src="https://static.pity.fun/picture/2021-10-15/1634292143829-image.png" alt="" loading="lazy"></p>
<p>展示出来是这个样子，代码里面加入了<code>注释</code>，大家对着看即可。由于<code>codesandbox</code>里面不太支持，所以我放到了一个antd pro的项目里面，给大家看看效果。</p>
<p><img src="https://static.pity.fun/picture/2021-10-15/1634292336697-image.png" alt="" loading="lazy"></p>
<p>这样，我们做到了只放大<code>编辑器</code>的效果，隐藏掉了其他不重要的部分（左侧部分）。</p>
<h3 id="存在的问题">存在的问题</h3>
<p>这样还远远不够，里面还有一些细节要<code>优化</code>。</p>
<ol>
<li>默认背景为黑色，不友好，我们需要设置样式</li>
<li>我们应该在全屏模式把编辑器高度变大</li>
<li>还有暗坑，待会再说</li>
</ol>
<h3 id="各个击破">各个击破</h3>
<ul>
<li>
<p>背景色</p>
<p>我们使用的这个库，会默认包裹一个全局的<code>div</code>，当全屏的时候，class为<code>.fullscreen.fullscreen-enabled</code>，而非全屏的时候则为<code>fullscreen</code>。</p>
<p>所以我们在全局/组件的样式里面写如下的css即可:</p>
</li>
</ul>
<pre><code class="language-css">.fullscreen.fullscreen-enabled {
background: #fff;
padding: 24px;
}
</code></pre>
<p><img src="https://static.pity.fun/picture/2021-10-15/1634292766271-image.png" alt="" loading="lazy"></p>
<p>可以看到这个样式已经<code>生效</code>了，而且我们加入了padding，这样看起来Card就不会被<code>挤到边上</code>。</p>
<ul>
<li>
<p>高度</p>
<p>我们之前设置了full变量，所以我们修改一下代码，根据full来判断高度。</p>
</li>
</ul>
<p><img src="https://static.pity.fun/picture/2021-10-15/1634292946939-image.png" alt="" loading="lazy"></p>
<p><img src="https://static.pity.fun/picture/2021-10-15/1634292916655-image.png" alt="" loading="lazy"></p>
<p>可以看到盒子的<code>高度</code>已经发生了变化。</p>
<h3 id="扩展部分">扩展部分</h3>
<p>如果你以为这就结束了，那就<code>大错特错</code>了。接下来我们说一说暗坑。</p>
<p>在antd组件里面，modal/drawer/message等等都是在body中生成的dom元素，所以我们会<code>遇到什么问题呢</code>？</p>
<p>在<code>全屏模式</code>根本就看不到对话框/消息提示等。</p>
<p>但<code>好在antd</code>提供了对应的参数，控制dom的挂载元素。</p>
<ul>
<li>
<p>Modal</p>
<p>modal可以这么解决，我们首先设置一个<code>full_screen</code>的id:</p>
<p><img src="https://gitee.com/woodywrx/picture/raw/master/2021-10-15/1634293170164-image.png" alt="" loading="lazy"></p>
<p>注意，这个id一定要在FullScreen组件里面。</p>
<p>接着我们在Modal.info,Modal组件里面都加入如下参数:</p>
<p><img src="https://static.pity.fun/picture/2021-10-15/1634293252806-image.png" alt="" loading="lazy"></p>
<p><strong>注意: 这里的modal我的demo里面并没有写，这个属于扩展部分。写一个modal组件也不复杂，大家可以自己尝试下。</strong></p>
</li>
<li>
<p>Modal.info这样的api</p>
</li>
</ul>
<pre><code class="language-javascript">Modal.info({
title: 'cud请求参数',
width: 800,
// 注意加上这个
getContainer: document.getElementById('full_screen')
}）
</code></pre>
<ul>
<li>
<p>message</p>
<p>通过message.config传入getContainer方法:</p>
<p><img src="https://static.pity.fun/picture/2021-10-15/1634293427936-image.png" alt="" loading="lazy"></p>
<p>这里我没找到很好的办法，每次message.info的时候都需要config一下，还是比较麻烦的。如果作为<code>全局配置</code>则又可能出问题，大家有更好的办法可以留言哈。</p>
</li>
</ul><br><br>
来源：https://www.cnblogs.com/we8fans/p/15412226.html
頁:
[1]