在前端开发中，我们经常会需要用到弹出对话框、提示框等浮层组件来提升用户交互体验。而 npm 上有许多优秀的浮层组件库可以使用，其中就包括了 eg-overlay。
eg-overlay 是一个基于原生 JavaScript 的浮层组件，其缺省提供了多个常用的浮层类型，包括如下：
- Loading 加载浮层
- Confirm 确认对话框
- Tooltip 提示浮层
- Notify 通知浮层
eg-overlay 支持跨浏览器、跨平台，且提供了丰富灵活的配置选项。以下是详细的使用教程。
安装
1. npm 安装
在你的项目目录下运行以下命令：
npm install eg-overlay
2. 直接引入
你也可以直接从 CDN 引入 eg-overlay：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/eg-overlay/dist/eg-overlay.min.css" /> <script src="https://cdn.jsdelivr.net/npm/eg-overlay/dist/eg-overlay.min.js"></script>
简单用例
要使用 eg-overlay，首先需要引入它：
import { Overlay } from 'eg-overlay';然后，就可以根据需要创建浮层了：
-- -------------------- ---- -------
-- -- ------- ---------
----- ------- - --- -----------------
-------- -------------
----- -- -- -
-- ---------------
------------------
-
---
---------------选项
eg-overlay 提供了多个选项，可以配置浮层的样式、行为等：
类型
eg-overlay 支持多种浮层类型，包括 Loading、Confirm、Tooltip 和 Notify。例如，要创建一个 Loading 浮层，可以这么做：
const overlay = new Overlay.Loading();
内容
你可以通过 content 选项设置浮层的内容。它可以是纯文本，也可以是包含 HTML 标签的字符串。
const overlay = new Overlay.Loading({
content: 'Loading...'
});样式
eg-overlay 的样式表提供了多个 CSS 变量，可以调整浮层的样式。
例如，下面的代码可以将 Loading 浮层的读取条颜色改为红色：
eg-loading {
--overlay-loading-bar-color: red;
}事件
eg-overlay 提供了多个事件回调函数，可以让你在特定的阶段执行自定义代码，例如在弹出框关闭后发送 HTTP 请求：
-- -------------------- ---- ------- ----- ------- - --- ----------------- -------- ------------ --- ------------------------ -- -- - -- ------------- -------------------- --------- --- ---------------
你可以使用的事件包括开始显示前（beforeshow）、开始显示后（aftershow）、关闭前（beforeclose）和关闭后（afterclose）。
其他
其他可选的选项还包括：
position：位置。默认值为'center'，还支持'top'、'bottom'、'left'、'right'和一组[x,y]坐标值。duration：持续时间。默认值为Infinity，表示漫游地显示，可以设置为毫秒数值。closable：是否可被关闭。默认值为true。
示例代码
Loading 浮层
-- -------------------- ---- ------- ------ - ------- - ---- ------------- ----- ------- - --- ----------------- -------- ------------- --------- ----- --------- ---- --- ---------------
Confirm 弹出框
-- -------------------- ---- -------
------ - ------- - ---- -------------
----- ------- - --- -----------------
-------- -------------
--------- ---------
----- -- -- -
------------------
-
---
---------------Tooltip 提示浮层
-- -------------------- ---- ------- ------ - ------- - ---- ------------- ----- ------- - --- ----------------- ------- ------------------------------------------ -------- ------- --------- ------ --------- ---- --- ---------------
Notify 通知浮层
-- -------------------- ---- -------
------ --------- ---- -------------
----- ------- - --- ----------------
-------- --------
--------- -----
--------- -----
-------- -- -- -
------------------- ---------
-
---
---------------结论
eg-overlay 是一款非常实用的原生 JavaScript 浮层组件库，在前端项目中极为常见。在项目开发中，使用 eg-overlay 可以优化用户交互体验，提升页面的美观性和易用性。希望这篇教程对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005570281e8991b448d3e8c