简介
react-friendly-modal 是一个基于 React 的轻量级模态框组件，具有高度的可配置性和灵活性，支持自定义样式和回调函数，可以方便地集成到各种前端项目中。
安装
使用 npm 进行安装：
npm install react-friendly-modal
使用
在需要使用模态框的组件中引入 react-friendly-modal，例如：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----- ---- -----------------------
-------- ----- -
----- ----------- ------------- - ----------------
----- --------------- - -- -- -
-------------------
--
----- ---------------- - -- -- -
--------------------
--
------ -
--
------- ----------------------------------------
------
------------------
--------------------------
--------------
-------------------
--------------- ---------------------------------------
--
---
--
-API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| isOpen | boolean | false | 控制模态框是否打开 |
| onClose | function | 关闭模态框时的回调函数 | |
| title | string, element or undefined | 模态框的标题 | |
| content | string, element or undefined | 模态框的内容 | |
| footer | string, element or undefined | 模态框的底部元素 | |
| customClass | string | '' | 自定义模态框的类名 |
| showClose | boolean | true | 是否显示关闭按钮 |
| closeOnOverlay | boolean | true | 是否在点击模态框外部遮罩层时关闭模态框 |
| overlayZIndex | number | 1000 | 遮罩层的 z-index 值 |
| dialogZIndex | number | 1001 | 模态框的 z-index 值 |
| width | number or string or undefined | 'auto' | 模态框的宽度 |
| height | number or string or undefined | 'auto' | 模态框的高度 |
| minWidth | number or string or undefined | 'none' | 模态框的最小宽度 |
| maxWidth | number or string or undefined | 'none' | 模态框的最大宽度 |
| minHeight | number or string or undefined | 'none' | 模态框的最小高度 |
| maxHeight | number or string or undefined | 'none' | 模态框的最大高度 |
| borderRadius | number or string or undefined | '4px' | 模态框的圆角半径 |
| boxShadow | string or undefined | '0 2px 8px' | 模态框的阴影效果 |
| style | object or undefined | {} | 自定义模态框的样式 |
| overlayStyle | object or undefined | {} | 自定义遮罩层的样式 |
| contentStyle | object or undefined | {} | 自定义内容区域的样式 |
| footerStyle | object or undefined | {} | 自定义底部区域的样式 |
| headerStyle | object or undefined | {} | 自定义标题区域的样式 |
| closeStyle | object or undefined | {} | 自定义关闭按钮的样式 |
| children | element or undefined | 插入到模态框内容区域的子元素，当 content 属性为 undefined 时有效 |
示例
下面提供一个实际应用示例，演示如何使用 react-friendly-modal 显示一个登录框：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----- ---- -----------------------
-------- ------------ ------- ------- -- -
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- -------------------- - ------- -- -
--------------------------------
--
----- -------------------- - ------- -- -
--------------------------------
--
----- ------------ - ------- -- -
-----------------------
-- ------
----------
--
------ -
------
---------------
-----------------
----------
---------
----- ------------------------
-----
------ -------------------------------
------ ----------- ------------- ---------------- ------------------------------- --
------
-----
------ ------------------------------
------ --------------- ------------- ---------------- ------------------------------- --
------
------- -------------------------
-------
-
--------------- ------------------------------
-------------
--
--
-
-------- ----- -
----- ----------- ------------- - ----------------
----- --------------- - -- -- -
-------------------
--
----- ---------------- - -- -- -
--------------------
--
------ -
--
------- -------------------------------------
----------- ------------------ -------------------------- --
---
--
-总结
react-friendly-modal 是一个使用简单、功能丰富的模态框组件，可以大大提升前端开发效率。通过本文的介绍和示例，相信大家已经掌握了如何使用它来制作自己的模态框了。如果你有什么问题或想法，欢迎在评论区留言，和大家一起交流学习！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606d81e8991b448de921