React封装全屏弹框的方法

本文实例为大家分享了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 一般是表单元素

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于React封装全屏弹框的方法的详细内容...