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 一般是表單元素

到此，相信大家對“React怎么封裝全屏彈框”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！