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 一般是表單元素
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。