客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
介绍本文基于 起因是开发今天给我提了一个 其实我觉得也没有很小（orz） 全屏大家应该都在web页面里面见过 上图就是leetcode全屏后的效果了，省略了菜单等 看起来全屏展示分为
如上图一样， 全屏的用处全屏的话，似乎当你希望全身心 安装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"));
展示出来是这个样子，代码里面加入了 这样，我们做到了只放大 存在的问题这样还远远不够，里面还有一些细节要
各个击破背景色我们使用的这个库，会默认包裹一个全局的 所以我们在全局/组件的样式里面写如下的css即可:
.fullscreen.fullscreen-enabled {
background: #fff;
padding: 24px;
}
可以看到这个样式已经 高度我们之前设置了full变量，所以我们修改一下代码，根据full来判断高度。 可以看到盒子的 扩展部分如果你以为这就结束了，那就 在antd组件里面，modal/drawer/message等等都是在body中生成的dom元素，所以我们会 在 但 Modalmodal可以这么解决，我们首先设置一个 注意，这个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实现组件全屏化的文章就介绍到这了,更多相关React组件全屏化内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界！ |
请发表评论