网站介绍

这个网站是一个基于React的前端项目，使用了Ant Design组件库来构建用户界面。主要功能是创建一个对话框(Modal)用于显示确认操作的消息框。

页面结构

  • 页面主体包含一个使用antd-modal-confirm组件创建的模态框，该模态框用于显示确认消息。
  • antd-modal-confirm: Ant Design提供的确认框组件，用于在用户进行重要操作前进行确认。
  • antd-modal-confirm-body-wrapper: 确认消息的容器，包含了消息的标题和内容。
  • antd-modal-confirm-body: 确认消息的内容部分，使用Flex布局以适应不同长度的消息文本。
  • .anticon: Ant Design图标类，用于表示消息类型为确认或取消。
  • antd-modal-footer: 模态框底部的操作按钮，包括确认和取消按钮。
  • styles: CSS样式类，用于设置模态框的外观和布局。

代码示例

以下是一个简单的代码片段，展示如何使用上述组件和样式类：

import React from 'react';
import { Button, Modal } from 'antd';
import './ConfirmModal.css'; // 导入样式文件

const ConfirmModal = ({ title, content, onConfirm, onCancel }) => {
return (
<Modal title={title}>
<Modal.Body style={{ display: 'flex', flexDirection: 'column' }}>
<div className="antd-modal-confirm-body">
{content}
</div>
<div className="anticon" />
</Modal.Body>
<Modal.Footer style={{ display: 'flex', justifyContent: 'space-between' }}>
<Button onClick={onConfirm}>确认</Button>
<Button onClick={onCancel}>取消</Button>
</Modal.Footer>
</Modal>
);
};

export default ConfirmModal;

以上代码定义了一个名为ConfirmModal的组件，接收必要的属性title(标题)、content(消息内容)以及两个回调函数onConfirm(确认按钮点击事件处理函数)和onCancel(取消按钮点击事件处理函数)。在模态框内部，通过设置相应的CSS样式类实现了居中对齐、自适应宽度等效果。