Modal 对话框 #

import { Modal, Button } from 'antd';
import { useState } from 'react';

const [open, setOpen] = useState(false);

<Button type="primary" onClick={() => setOpen(true)}>
  打开对话框
</Button>

<Modal
  title="对话框标题"
  open={open}
  onOk={() => setOpen(false)}
  onCancel={() => setOpen(false)}
>
  <p>对话框内容</p>
  <p>对话框内容</p>
  <p>对话框内容</p>
</Modal>

import { Modal, Button } from 'antd';
import { useState } from 'react';

const [open, setOpen] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);

const handleOk = async () => {
  setConfirmLoading(true);
  try {
    await submitData();
    setOpen(false);
  } finally {
    setConfirmLoading(false);
  }
};

<Modal
  title="对话框标题"
  open={open}
  confirmLoading={confirmLoading}
  onOk={handleOk}
  onCancel={() => setOpen(false)}
>
  <p>对话框内容</p>
</Modal>

import { Modal, Button } from 'antd';

const showConfirm = () => {
  Modal.confirm({
    title: '确定要删除吗？',
    content: '删除后数据将无法恢复',
    okText: '确定',
    cancelText: '取消',
    onOk() {
      return new Promise((resolve) => {
        setTimeout(resolve, 1000);
      });
    },
    onCancel() {},
  });
};

<Button onClick={showConfirm}>确认对话框</Button>

import { Modal, Button, Space } from 'antd';

<Space>
  <Button onClick={() => Modal.info({ title: '信息提示', content: '内容' })}>
    信息
  </Button>
  <Button onClick={() => Modal.success({ title: '成功提示', content: '内容' })}>
    成功
  </Button>
  <Button onClick={() => Modal.error({ title: '错误提示', content: '内容' })}>
    错误
  </Button>
  <Button onClick={() => Modal.warning({ title: '警告提示', content: '内容' })}>
    警告
  </Button>
</Space>

import { Modal, Button, Space } from 'antd';

<Space>
  <Button onClick={() => setModalWidth(600)}>600px</Button>
  <Button onClick={() => setModalWidth(1000)}>1000px</Button>
  <Button onClick={() => setModalWidth('90%')}>90%</Button>
</Space>

<Modal
  title="对话框标题"
  open={open}
  width={modalWidth}
  onOk={() => setOpen(false)}
  onCancel={() => setOpen(false)}
>
  <p>对话框内容</p>
</Modal>

import { Modal, Button } from 'antd';

<Modal
  title="全屏对话框"
  open={open}
  width="100%"
  style={{ top: 0 }}
  onOk={() => setOpen(false)}
  onCancel={() => setOpen(false)}
>
  <p>对话框内容</p>
</Modal>

import { Modal, Button } from 'antd';

<Modal
  title="居中对话框"
  centered
  open={open}
  onOk={() => setOpen(false)}
  onCancel={() => setOpen(false)}
>
  <p>对话框内容</p>
</Modal>

import { Modal, Button } from 'antd';

<Modal
  title="自定义页脚"
  open={open}
  footer={[
    <Button key="back" onClick={() => setOpen(false)}>
      取消
    </Button>,
    <Button key="submit" type="primary" onClick={() => setOpen(false)}>
      提交
    </Button>,
  ]}
>
  <p>对话框内容</p>
</Modal>

import { Modal, Button } from 'antd';

<Modal
  title="无页脚对话框"
  open={open}
  footer={null}
  onCancel={() => setOpen(false)}
>
  <p>对话框内容</p>
</Modal>

import { Modal, Form, Input, Button } from 'antd';

const [form] = Form.useForm();

const handleOk = async () => {
  try {
    const values = await form.validateFields();
    console.log('表单数据:', values);
    setOpen(false);
  } catch (error) {
    console.error('验证失败:', error);
  }
};

<Modal
  title="表单对话框"
  open={open}
  onOk={handleOk}
  onCancel={() => setOpen(false)}
  destroyOnClose
>
  <Form form={form} layout="vertical">
    <Form.Item name="name" label="姓名" rules={[{ required: true }]}>
      <Input />
    </Form.Item>
    <Form.Item name="email" label="邮箱" rules={[{ required: true, type: 'email' }]}>
      <Input />
    </Form.Item>
  </Form>
</Modal>

import { Modal } from 'antd';

const [modal, contextHolder] = Modal.useModal();

const showConfirm = () => {
  modal.confirm({
    title: '确定删除吗？',
    content: '此操作不可恢复',
    onOk: handleDelete,
  });
};

return (
  <>
    <Button onClick={showConfirm}>删除</Button>
    {contextHolder}
  </>
);

import { Modal, Form, Input } from 'antd';

const UserModal = ({ open, onClose, onSubmit }) => {
  const [form] = Form.useForm();

  const handleOk = async () => {
    const values = await form.validateFields();
    onSubmit(values);
    form.resetFields();
  };

  return (
    <Modal
      title="用户信息"
      open={open}
      onOk={handleOk}
      onCancel={onClose}
      destroyOnClose
    >
      <Form form={form} preserve={false}>
        <Form.Item name="name" label="姓名" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};

import { Modal } from 'antd';

Modal.confirm({
  title: '确定提交吗？',
  content: '提交后将无法修改',
  onOk: async () => {
    await submitData();
    message.success('提交成功');
  },
});