React封装全屏弹框的方法

本文实例为大家分享了React封装全屏弹框的具体代码，供大家参考，具体内容如下web开发过程中，需要用到弹框的地方很多，有时候，产品经理的原型是全屏弹框，而常用的组件库里封装的一般都不是全屏的。如下图...

本文实例为大家分享了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 取消事件
*@copythonntent 组件内容
*@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="React封装全屏弹框的方法" />
     </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: 5pwww.cppcns.comx 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} visibljavascripte={visible} handleCancel={handleCancel} />
    </Fragment>
 )
}

content 一般是表单元素

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