dialog.open配置介绍

dialog.open 是一个内置的弹窗组件，可以快速方便地创建弹窗，并在弹窗中展示数据、表单、图片、视频等内容。在使用这个组件时，您可以设置以下配置项：

title

• 类型: string
• 默认值: ''
• 描述: 弹窗的标题。

content

• 类型: string | ReactNode
• 默认值: ''
• 描述: 弹窗中要展示的内容。

footer

• 类型: string | ReactNode
• 默认值: null
• 描述: 弹窗的底部，用于放置操作按钮等内容。

width

• 类型: number
• 默认值: 520
• 描述: 弹窗的宽度。

destroyOnClose

• 类型: boolean
• 默认值: false
• 描述: 是否在弹窗关闭时销毁弹窗里面的内容。

confirmLoading

• 类型: boolean
• 默认值: false
• 描述: 确认按钮是否加载中。

onOk

• 类型: function
• 默认值: () => {}
• 描述: 点击确认按钮的回调函数。

onCancel

• 类型: function
• 默认值: () => {}
• 描述: 点击取消按钮的回调函数。

maskClosable

• 类型: boolean
• 默认值: true
• 描述: 是否点击蒙层关闭弹窗。

使用示例：

import React from 'react';
import { Button } from 'antd';
import { dialog } from 'somewhere';

const MyComponent = () => {
  const handleClick = () => {
    dialog.open({
      title: '弹窗标题',
      content: '弹窗内容',
      footer: (
        <>
          <Button onClick={dialog.close}>取消</Button>
          <Button type="primary" loading={dialog.confirmLoading} onClick={() => dialog.close(true)}>确认</Button>
        </>
      ),
      width: 600,
      onOk: () => console.log('点击了确认按钮'),
      onCancel: () => console.log('点击了取消按钮'),
      maskClosable: false,
    });
  };

  return (
    <Button onClick={handleClick}>打开弹窗</Button>
  );
};

export default MyComponent;