58 lines
2.1 KiB
JavaScript
58 lines
2.1 KiB
JavaScript
import React, { useEffect } from 'react';
|
||
import ReactDOM from 'react-dom';
|
||
import { CloseOutlined } from '@ant-design/icons';
|
||
import titleBg from '@/assets/images/modal/title.png';
|
||
import './index.less';
|
||
|
||
const CommonModal = ({ visible, onClose, title, children, width, tabs = [], activeTab, onTabChange, bodyStyle = {} }) => {
|
||
useEffect(() => {
|
||
if (visible) {
|
||
//当弹框打开时，如果不加这行代码，用户滚动鼠标滚轮时，背后的页面（Home 页）也会跟着滚动
|
||
document.body.style.overflow = 'hidden';
|
||
} else {
|
||
document.body.style.overflow = '';
|
||
}
|
||
return () => {
|
||
document.body.style.overflow = '';
|
||
};
|
||
}, [visible]);
|
||
|
||
if (!visible) return null;
|
||
//它允许把组件的 UI “传送” 到当前组件树之外的 DOM 节点,当前是传送到document.body，如果不这样做的话CommonModal 写在一个很深的 div 里，且那个 div 有 overflow: hidden 或者复杂的 z-index ，弹框很可能会被截断、遮挡，或者定位异常。
|
||
return ReactDOM.createPortal(
|
||
<div className="common-modal-overlay">
|
||
<div className="common-modal-container" style={width ? { width: width, minWidth: 'auto' } : {}}>
|
||
<div className="modal-header">
|
||
<div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
|
||
<span className="title-text">{title}</span>
|
||
</div>
|
||
|
||
{tabs && tabs.length > 0 && (
|
||
<div className="modal-tabs">
|
||
{tabs.map((tab) => (
|
||
<div
|
||
key={tab.value}
|
||
className={`tab-item ${activeTab === tab.value ? 'active' : ''}`}
|
||
onClick={() => onTabChange && onTabChange(tab.value)}
|
||
>
|
||
{tab.label}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
<div className="close-btn" onClick={onClose}>
|
||
<CloseOutlined />
|
||
</div>
|
||
</div>
|
||
<div className="modal-body" style={bodyStyle}>
|
||
{children}
|
||
</div>
|
||
</div>
|
||
</div>,
|
||
document.body
|
||
);
|
||
};
|
||
|
||
export default CommonModal;
|