全局弹框 · AntDesign

核心 API 请查阅 全局弹框-基础篇，本文档仅说明 AntDesign 框架下的特化配置。

导入路径

import { $initHook, $JiessDialog } from '@jiess/plus/react';

const hook = $initHook({
    ui: antd,            // antd 根对象
    ...React,            // React API
});

AntDesign 特化属性

基于 AntDesign Modal，以下属性可透传：

属性	类型	默认值	说明
width	string|number	960	弹框宽度（数字为 px）
centered	boolean	false	垂直居中
maskClosable	boolean	false	点击遮罩是否关闭
keyboard	boolean	true	按 ESC 是否关闭
destroyOnClose	boolean	false	关闭时销毁内容
closable	boolean	true	是否显示关闭按钮
okText	string	'确定'	确定按钮文字
cancelText	string	'取消'	取消按钮文字
confirmLoading	boolean	false	确定按钮 loading

$JiessDialog({
    $title: '编辑',
    $content: { /* ... */ },
    width: 600,
    centered: true,        // 垂直居中显示
    maskClosable: false,
});

AntDesign 特有配置

确认对话框

$JiessDialog({
    $title: '删除确认',
    $content: '确定要删除该记录吗？',
    $footer: {
        $Btns: {
            children: [
                { $Button: { children: '取消', onClick: 'cancel' } },
                {
                    $Button: {
                        children: '确定',
                        type: 'primary',
                        danger: true,
                        onClick: 'submit',
                    },
                },
            ],
        },
    },
    width: 420,
});

加载弹框

$JiessDialog({
    $title: '处理中...',
    $content: {
        $Spin: { tip: '正在提交数据，请稍候...' },
    },
    closable: false,
    maskClosable: false,
    keyboard: false,
    width: 300,
});

注意事项

事项	说明
弹框嵌套	内部使用 state.instances 数组管理层级
Antd Modal v4	兼容 Ant Design 4.x（适配层处理了 API 差异）
getContainer	Jiess 内部自动设置挂载节点为 document.body

实战示例

示例 1：弹框内嵌表单

import { Modal, Button, message } from 'antd';
import { $JiessDialog } from '@jiess/plus/react';

const dialogConfig = $JiessDialog({
    $title: '新增用户',
    $content: {
        children: {
            $Form: {
                layout: 'horizontal',
                labelCol: { span: 6 },
                wrapperCol: { span: 18 },
                children: {
                    name: { $label: '姓名', $name: 'name', $rules: ['required'], $Input: { placeholder: '请输入姓名', allowClear: true } },
                    email: { $label: '邮箱', $name: 'email', $rules: ['required', 'email'], $Input: { placeholder: '请输入邮箱' } },
                    status: {
                        $label: '状态', $name: 'status', $value: 1,
                        $Select: { options: [{ label: '启用', value: 1 }, { label: '禁用', value: 0 }] },
                    },
                },
            },
        },
    },
    $footer: {
        $Btns: {
            children: [
                { $Button: { children: '取消', onClick: 'cancel' } },
                {
                    $Button: {
                        children: '确定', type: 'primary',
                        onClick() { this.validate().then(data => api.createUser(data)).then(() => this.close()); },
                    },
                },
            ],
        },
    },
    width: 600,
    centered: true,
    destroyOnClose: true,     // 关闭时销毁，避免数据残留
    maskClosable: false,
});

示例 2：确认对话框（含异步 loading）

const confirmDialog = $JiessDialog({
    $title: '删除确认',
    $content: '确定要删除该用户吗？此操作不可撤销。',
    $footer: {
        $Btns: {
            children: [
                { $Button: { children: '取消', onClick: 'cancel' } },
                {
                    $Button: {
                        children: '确定删除', danger: true,
                        async onClick() {
                            this.setLoading?.(true);
                            await api.deleteUser(userId);
                            message.success('删除成功');
                            this.close();
                        },
                    },
                },
            ],
        },
    },
    width: 420,
    centered: true,
    icon: <ExclamationCircleOutlined />,
});

示例 3：加载中弹框

$JiessDialog({
    $content: {
        $Spin: {
            spinning: true,
            tip: '正在处理数据，请稍候...',
            size: 'large',
            children: { tag: 'div', style: { height: '120px' } },
        },
    },
    closable: false,
    maskClosable: false,
    keyboard: false,
    footer: null,
    width: 300,
    centered: true,
});

下一步

• 全局弹框-基础篇 — BuildDialog 核心 API