openModal 弹窗管理工具使用说明

概述

openModal 是一个基于 React 18+ 和 Ant Design Modal 的高阶弹窗管理工具，提供了动态创建、更新和销毁弹窗的能力，支持 TypeScript 类型提示。

安装与导入

import { openModal } from './openModal';
import YourDialogComponent from './YourDialogComponent';

核心功能

基本用法

// 定义弹窗组件
interface IProps extends IModalBaseProps {
    record?: any;
}

const MyDialog = (props: IProps) => {
    const onSubmit = () => {
        // todo
        props.onClosed?.({ ok: true });
    };
    return (
        <Modal
            title='标题'
            onCancel={() => props.onClosed?.({ cancel: true })}
            onOk={onSubmit}
            {...props}
        >
            <p>弹窗内容</p>
        </Modal>
    );
};

// 打开弹窗
const modalIns = openModal(MyDialog, {
    onClosed: () => {
        modalIns.destroy();
    },
});

控制弹窗

// 更新弹窗属性
modal.update({ title: '新的标题' });

// 关闭弹窗（触发onClosed回调）
modal.destroy();

// 带参数的关闭
modal.destroy({ ok: true }); // 表示通过确定按钮关闭

高级特性

类型安全（TypeScript）

interface IDialogProps {
    title: string;
    content: string;
    onClosed?: (params?: { cancel?: boolean }) => void;
}

const modal = openModal<IDialogProps>(MyDialog, {
    title: '类型安全示例',
    content: '类型提示会生效',
});

批量销毁所有弹窗

// 在需要的地方调用（如路由切换时）
destroyFns.forEach(destroy => destroy());

自定义关闭逻辑

openModal(MyDialog, {
    title: '自定义关闭',
    onClosed: params => {
        if (params?.ok) {
            console.log('用户点击了确定');
        } else {
            console.log('用户取消了');
        }
    },
});