本文实例为大家分享了React封装全屏弹框的具体代码，供大家参考，具体内容如下
web开发过程中，需要用到弹框的地方很多，有时候，产品经理的原型是全屏弹框，而常用的组件库里封装的一般都不是全屏的。
如下图所示：这就是一个全屏弹框。
废话不多说，直接上代码：
// FullScreen.tsx
import React, { memo, useEffect } from 'react';
import { Spin } from '@/components/antd';
import IconUrl from '@/assets/icon/closeIcon.png';
import './index.scss';
/*
*全屏表格自适配组件
*@title 标题
*@visible 是否显示
*@handleCancel 取消事件
*@content 组件内容
*@loadding 状态
*/
function FullScreen({ title, visible, handleCancel, content, loadding = false }: any) {
const collapsed = localStorage.getItem('collapsed');
const collapse = collapsed ?? '1';
useEffect(() => {
return () => {
localStorage.removeItem('collapsed');
};
}, []);
return (
visible && (
<div id="commonModal" style={+collapse === 1 ? { left: 210,top:93 } : { left: 100,top:93 }}>
{/*<!-- 顶部 -->*/}
<div className="modalTop">
<div className="modal_title">
<div className="topTitle">{title}</div>
</div>
<img className="topIcon" onClick={handleCancel} src={IconUrl} alt="" />
</div>
<Spin spinning={loadding} tip="Loading..." size="large" delay={500}>
<div className="modalMain">{content}</div>
</Spin>
</div>
)
);
}
export default memo(FullScreen);这个是相关的css样式 – index.scss
// index.scss
#commonModal {
position: fixed;
bottom: 0px;
right: 0px;
background: white;
border-radius: 5px;
// width: 100%;
// height: 100%;
// height: 95vh;
z-index: 10;
.modalTop {
width: 100%;
height: 46px;
border-radius: 5px 5px 0 0;
display: flex;
background: white;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #dbe3e5;
box-sizing: border-box;
padding: 0 20px;
.modal_title {
display: flex;
align-items: center;
.topTitle {
color: #333545;
font-weight: bold;
font-size: 18px;
}
}
.topIcon {
width: 24px;
height: 24px;
cursor: pointer;
}
}
.modalMain {
height: 100%;
padding-bottom: 30px;
// height: calc(100vh - 80px);
// height: calc(90vh - 120px);
::-webkit-scrollbar {
// height: 8px;
// width: 10px;
}
}
}
// .modal_mask {
// position: fixed;
// width: 100%;
// height: 100%;
// left: 0;
// top: 0;
// // background-color: rgba(0, 0, 0, 0.5);
// z-index: 10;
// }在相关页面中进行使用：
import FullScreen from '@/components/FullScreen/FullScreen';
const test = (props) => {
return (
<Fragment>
<FullScreen loadding={isLoading} title={'新增'} content={content} visible={visible} handleCancel={handleCancel} />
</Fragment>
)
}content 一般是表单元素
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持阿兔在线工具。
