本文实例为大家分享了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';
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 一般是表单元素
--结束END--
本文标题: React封装全屏弹框的方法
本文链接: https://lsjlt.com/news/166014.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0