在前端开发中，弹窗是一个很常见的需求。@nfort/react-skylight 是一个用 React 实现的弹窗组件，支持自定义样式和内容。本文将介绍如何使用 @nfort/react-skylight。
安装和引入
使用 npm 进行安装：
npm install @nfort/react-skylight
引入依赖：
import React from 'react'; import SkyLight from '@nfort/react-skylight';
基本使用方法
-- -------------------- ---- -------
----- --- ------- --------------- -
-------- -
------ -
-----
------- ----------- -- ---------------------------------------
---------
--------------------
-------- -- ------------------ - -----
------------
-
---------
-----------
------
--
-
-在上面的代码中，我们创建了一个按钮，当用户点击按钮时，会弹出一个标题为“欢迎使用”，内容为“这是一个简单的弹窗”的弹窗。我们使用了 SkyLight 组件的 title 属性和子元素来定义弹窗的内容和标题。ref 属性用于引用弹窗组件，以便在点击按钮时显示弹窗。hideOnOverlayClicked 属性表示单击弹窗外部区域会关闭弹窗。
自定义样式
-- -------------------- ---- -------
----- ------------ - -
---------------- ----------
------ -------
------ ------
------- -------
---------- ---------
----------- -------
------------- ------
-------- ------
--
----- --- ------- --------------- -
-------- -
------ -
-----
------- ----------- -- ---------------------------------------
---------
--------------------
---------------------------
------------------- ------ ------ --
-------- -- ------------------ - -----
------------
-
---------
-----------
------
--
-
-在上面的代码中，我们定义了一个名为 dialogStyles 的样式对象，并将其传递给了 SkyLight 组件的 dialogStyles 属性。closeButtonStyle 属性用于设置关闭按钮的样式。在 dialogStyles 中，我们设置了弹窗的背景颜色、宽度、高度、外边距、边框半径和内边距。
API
SkyLight 组件的属性
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| closeButton | boolean | true | 是否显示关闭按钮 |
| closeButtonStyle | object | null | 关闭按钮的样式 |
| dialogStyles | object | null | 弹窗的样式 |
| hideOnOverlayClicked | boolean | false | 点击弹窗外部区域是否关闭弹窗 |
| onCloseClicked | function | null | 关闭按钮点击事件 |
| onOverlayClicked | function | null | 弹窗外部区域点击事件 |
| ref | function | null | 引用组件，用于在父组件中引用弹窗组件 |
| show | boolean | false | 是否显示弹窗 |
| showOverlay | boolean | true | 是否显示弹窗背景遮罩层 |
| title | string | null | 弹窗标题 |
| titleStyle | object | null | 弹窗标题的样式 |
| transitionDuration | number | 200 | 弹窗的过渡动画时间，单位毫秒 |
| transitionState | string | unmounted | 弹窗的过渡状态，可选值为：unmounted、leading、entered、leaving、exited |
| beforeClose | function | null | 在关闭弹窗之前执行的函数，如果该函数返回 false，则不会关闭弹窗，否则会继续执行关闭弹窗的操作 |
| beforeShow | function | null | 在显示弹窗之前执行的函数，如果该函数返回 false，则不会显示弹窗，否则会继续执行显示弹窗的操作 |
| afterOpen | function | null | 弹窗显示后执行的函数 |
| afterClose | function | null | 弹窗关闭后执行的函数 |
| bodyOverflowHidden | boolean | true | 是否在显示弹窗时隐藏页面滚动条 |
| disableMouseScroll | boolean | false | 是否禁用鼠标滚轮 |
| id | string | null | 弹窗的 ID |
| parentStylesheet | boolean | true | 是否将样式添加到全局样式表中 |
| renderToBody | boolean | false | 是否将弹窗插入到 body 标签下 |
| enableTabNavigation | boolean | true | 是否启用 TAB 键切换弹窗上的元素 |
| returnFocusAfterClose | boolean | true | 弹窗关闭后是否将焦点返回给原先焦点所在的元素 |
| hideBorderBottomOnTitle | boolean | false | 弹窗关闭后是否将焦点返回给原先焦点所在的元素 |
SkyLight 组件的方法
| 方法名 | 描述 |
|---|---|
| show() | 显示弹窗 |
| hide() | 隐藏弹窗 |
| toggle() | 切换弹窗的显示/隐藏状态 |
| cycle() | 进行一次完整的显示/隐藏切换 |
| setTitle() | 设置弹窗的标题 |
| beforeClose() | 设置在关闭弹窗之前执行的函数。如果该函数返回 false，则不会关闭弹窗，否则会继续执行关闭弹窗的操作 |
结语
@nfort/react-skylight 是一个非常实用的弹窗组件，不仅提供了丰富的 API，也支持自定义样式。在使用过程中，我们可以根据实际需求进行配置和定制，使得弹窗组件功能更为完善。希望本文能对读者在实际开发中使用 @nfort/react-skylight 提供帮助和指导。完整代码示例请见：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------------------
----- ------------ - -
---------------- ----------
------ -------
------ ------
------- -------
---------- ---------
----------- -------
------------- ------
-------- ------
--
----- --- ------- --------------- -
-------- -
------ -
-----
------- ----------- -- ---------------------------------------
---------
--------------------
---------------------------
------------------- ------ ------ --
-------- -- ------------------ - -----
------------
-
---------
-----------
------
--
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067371890c4f72775840af