弹出框 Modal

Modal 组件是一个可自定义的对话框组件，支持弹出框的标题、内容、宽度、取消操作、确认操作等功能，适用于各种交互场景。

---

📦 引入方式

import { Modal } from '@npmqg/react-ui-core';

---

🧩 使用示例

📚 基本用法

示例

源码

import React, { useState } from "react";
import { Button, Modal } from "@npmqg/react-ui-core";

 export default function DemoModal() {
 const [open, setOpen] = useState(false);

      const handleCancel = () => {
        setOpen(false);
      };

      return (
        <div>
          <Button onClick={() => setOpen(true)}>打开 Modal</Button>
          <Modal open={open} onCancel={handleCancel} title="这是标题">
            {() => <div>这里是 Modal 的内容</div>}
          </Modal>
        </div>
      );
 }

📚 确认对话框

示例

源码

 import React from "react";
 import { Button, Modal } from "@npmqg/react-ui-core";

 export default function DemoConfirmModal() {
     const handleDelete = () => {
         Modal.confirm({
             title: "确定删除吗？",
             description: "删除操作无法恢复",
             onOk: async () => {
                 // 执行删除操作
                 alert("测试删除");
             },
             cancelText: "取消",
             confirmText: "删除",
         }).then();
     };

      return <Button onClick={handleDelete}>删除</Button>;
 }

---

🧩 Props

📚Modal 组件 Props

名称	类型	默认值	描述
open	boolean	false	是否打开 Modal 对话框
title	React.ReactNode	''	Modal 的标题内容
width	number	600	Modal 的最大宽度
onCancel	() => void	() => void 0	关闭 Modal 时触发的回调函数
children	() => React.ReactNode	() => void 0	Modal 的内容区域，传递一个返回内容的函数
className	string	''	自定义 Modal 样式类
maskClose	boolean	false	是否允许点击遮罩关闭 Modal

📚Modal.confirm 方法 Props

名称	类型	默认值	描述
title	React.ReactNode	'Confirm'	确认框的标题
description	React.ReactNode	undefined	确认框的描述内容
confirmText	string	'确认'	确认按钮的文字
cancelText	string	'返回'	取消按钮的文字
width	number	500	确认框的最大宽度
onOk	`() => void	Promise<void>`	undefined	点击确认按钮时触发的回调函数

---

📐 样式说明

• 使用了 @radix-ui/react-dialog 库实现了 Dialog 弹窗组件。
• 使用了自定义的样式文件 index.scss，并通过 clsx 工具类来处理动态样式。
• 自定义样式包括：
• Modal 容器 (Modal)
• Modal 内部内容框 (ModalBox)
• 标题与按钮的样式
• 动态控制 Mask 关闭与否（通过 maskClose 控制）

---

📚 常见问题

📚 如何关闭 Modal？

Modal 会根据 open 属性来控制显示与隐藏。通过更新 open 状态并传递给 Modal 组件，来控制弹窗的开启与关闭。

📚 如何在点击遮罩时关闭 Modal？

可以通过 maskClose 属性来控制是否允许点击遮罩关闭 Modal。如果将 maskClose 设置为 false，点击遮罩不会关闭 Modal。

---

💡 扩展

你可以通过修改 Modal 的样式或者传递自定义内容来定制自己的弹窗，比如添加图片、表单或自定义按钮等。