React封裝全螢幕彈框的方法

2022-08-25 18:02:10

本文範例為大家分享了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 一般是表單元素

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

React封裝全螢幕彈框的方法

熱門文章