在前端开发中，提示弹窗是非常常见的需求。很多开发者使用自己封装的提示弹窗，但这样做效率低下，有时也无法满足需求。在这种情况下，我们可以使用一些第三方的提示弹窗库，其中之一就是 alertifyjs。
alertifyjs 是一个简单、灵活、易于使用的提示弹窗库，使用 npm 包安装后可以直接在项目中使用。本篇文章将详细介绍 alertifyjs 的使用方法，包括安装、引用、API 等方面。
安装 alertifyjs
在使用 alertifyjs 之前，首先需要在项目中安装该库。我们可以使用 npm 进行安装。
打开终端，进入项目目录，在终端中输入以下代码：
npm install alertifyjs
等待安装完成后，alertifyjs 就已经被安装在项目中了。
引用 alertifyjs
在安装完 alertifyjs 之后，接下来需要在项目中引用该库。在页面中引用 alertifyjs，可以使用以下两种方式：
方式一：使用 script 标签引用
在 HTML 页面的 head 标签中，使用 script 标签引用 alertifyjs 的 CSS 和 JS 文件。
<head> <link rel="stylesheet" href="./node_modules/alertifyjs/build/css/alertify.css" /> <script src="./node_modules/alertifyjs/build/alertify.js"></script> </head>
方式二：使用 webpack 或其他打包工具引用
如果你使用了 webpack 或其他打包工具构建项目，那么可以通过以下方式来引用 alertifyjs：
import alertify from 'alertifyjs'; import 'alertifyjs/build/css/alertify.css';
alertifyjs 的 API
alertifyjs 提供了一系列的 API，让我们在使用时非常方便。以下是 alertifyjs 的 API 概览：
alert(message, [onOkay], [options])
alert() 方法用于显示一个警示弹窗，如下所示：
alertify.alert('警告信息');除了 message 参数外，alert() 方法还支持两个可选参数：
onOkay：当用户按下 OK 按钮时触发的回调函数，如下所示：
alertify.alert('警告信息', function() {
console.log('已确认');
});options：用于配置 alert 弹窗的选项，如下所示：
-- -------------------- ---- ------- ---------------------- ---------- - ------------------- -- - ------ -------- ------ ----- ----- ----- -------- ------ --------------- ----- --- ---
confirm(message, [onConfirmed], [onCanceled], [options])
confirm() 方法用于显示一个确认弹窗，如下所示：
alertify.confirm('你确定吗？', function() {
console.log('已确认');
}, function() {
console.log('已取消');
});除了 message 参数外，confirm() 方法还支持两个可选参数：
onConfirmed：当用户按下确认按钮时触发的回调函数。onCanceled：当用户按下取消按钮时触发的回调函数。options：用于配置 confirm 弹窗的选项。
prompt(message, [defaultValue], [onConfirmed], [onCanceled], [options])
prompt() 方法用于显示一个可输入的确认弹窗，如下所示：
alertify.prompt('请输入名称：', function(val, ev) {
console.log('已确认', val);
}, function(ev) {
console.log('已取消');
});除了 message 参数外，prompt() 方法还支持三个可选参数：
defaultValue：为输入框设置默认值。onConfirmed：当用户按下确认按钮时触发的回调函数。onCanceled：当用户按下取消按钮时触发的回调函数。options：用于配置 prompt 弹窗的选项。
success(message, [onClosed], [options])
success() 方法用于显示一个成功的提示弹窗，如下所示：
alertify.success('操作成功！');除了 message 参数外，success() 方法还支持两个可选参数：
onClosed：当提示弹窗关闭时触发的回调函数。options：用于配置 success 弹窗的选项。
error(message, [onClosed], [options])
error() 方法用于显示一个错误的提示弹窗，如下所示：
alertify.error('操作失败！');除了 message 参数外，error() 方法还支持两个可选参数：
onClosed：当提示弹窗关闭时触发的回调函数。options：用于配置 error 弹窗的选项。
alertifyjs 示例代码
在介绍完 alertifyjs 的 API 后，我们来看一个示例代码。例如，我们需要在页面加载完成后，显示一个欢迎弹窗，通过 alert() 方法来实现：
-- -------------------- ---- -------
------ -------- ---- -------------
------------ -
--------------------------- ---------- -
------------------
-- -
------ -----
------ -----
---
--以上代码中，首先我们引用了 alertifyjs 的库，然后在页面加载完成后，调用 alert() 方法显示弹窗，当用户点击 OK 后，会触发回调函数，并在控制台写入一句欢迎语句。
总结
alertifyjs 是一个轻量、易用的提示弹窗库，使用 npm 包安装后，可以非常方便地在项目中使用。本篇文章介绍了 alertifyjs 的安装、引用和 API，同时提供了示例代码，希望对读者们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61837