React怎么封装全屏弹框

本篇内容主要讲解“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 一般是表单元素