前言
随着现代web技术不断发展，前端技术也越来越丰富。现在许多 Web 应用程序因为有大量丰富交互的界面而变得更加易于使用。为了实现这种要求，前端框架、库、插件等等被开发出来。其中，sweetalert2 是一个美观而功能强大的 JavaScript 警告框插件，可轻松替代JS的alert、prompt、和confirm。而 @sweetalert2/theme-bootstrap-4 则是 Swal2 的一个名为”Bootstrap 4” 的美化主题。本篇文章就是为了更好地介绍如何使用这个 npm 包。
准备工作
在开始本文之前，您需要了解以下知识点：
- HTML、CSS的基本语法和常用标签的基本应用
- JavaScript 标准语法，包括获取DOM对象的基本方法、事件绑定、以及 Promise 的基本使用
并且您需要在项目中已经安装过 sweetalert2，如果没有，请先进行安装。
npm i sweetalert2
安装主题
要使用一个 Swal2 的自定义主题，必然需要安装相应的主题包。而 @sweetalert2/theme-bootstrap-4 就是 Bootstrap 4 主题的包名称。
安装命令如下：
npm i @sweetalert2/theme-bootstrap-4
安装完成后，就可以在 HTML 标签中引用这个主题：
<link rel="stylesheet" href="./node_modules/@sweetalert2/theme-bootstrap-4/bootstrap-4.min.css">
引入SweetAlert2
在引用 @sweetalert2/theme-bootstrap-4 的 CSS 文件之后，就可以安装 sweetalert2/dist/sweetalert2.min.js 的脚本了：
<script src="./node_modules/sweetalert2/dist/sweetalert2.min.js"></script>
为了方便，推荐大家在html引入的script标签中设置必要的弹窗配置参数，如下：
-- -------------------- ---- -------
------- ------------------------------------------------------------------
--------
----- ------------------ - ------------
------------ -
-------------- ---- -------------
------------- ---- -----------
--
--------------- -----
--
---------以上代码可以使弹窗中的确认按钮变成冠以primay色的bootstrap样式，取消按钮则变成冠以danger色的bootstrap样式。
至此，SweetAlert2 和 Bootstrap 4 主题已经成功引入项目中。
使用 SweetAlert2
使用 SweetAlert2 的方式非常简单，可以在需要出现弹窗的地方，调用 Swal.fire() 方法即可。
在这里，我以弹窗“Hello World！”为例：
SwalWithBootstrap4.fire({
title: 'Hello World!',
text: '这是一个漂亮的警告框',
icon: 'success',
confirmButtonText: '确定'
})其中，title 表示弹窗的主标题，text 表示弹窗的文本内容，icon 表示弹窗的图标类型，confirmButtonText 表示弹窗确认按钮上的文本。
SweetAlert2 还拥有丰富的 API 能够让您定制化您的警告框。例如，你可以设置一条定时自动消失的提示：
-- -------------------- ---- -------
-------------------------
------ -------- -- -------------
----- ----------------
------ -----
----------------- -----
------------- -- -- -
---------------------------------
--
-------- -------------- -- -
------------------- --------------- --------------
-
---------- -- -
------------------ ------
-- -- -- -
------------------ -----------
---SweetAlert2 还可以轻松地嵌入 HTML，实现复杂的提示内容：
-- -------------------- ---- -------
-------------------------
----- -
---- ----------------------
---- ---------------- ----------- --------------- --
------
--------- ----------
------- -- -- ---- -----------
-
--还有很多其他的 API 没有一一列举，在 SweetAlert2 的文档 中你可以找到完整的 API 以及例子。
总结
到此为止，我们已经成功地使用了 @sweetalert2/theme-bootstrap-4 这个 npm 包定制了我们的弹窗。在实际项目中，我们可以将这些技巧应用于用户注册、信息修改等方方面面。
最后提醒大家，我们在使用 SweetAlert2 的时候要注意不要在同一个 HTML 页面中不小心引用多个版本不同的 SweetAlert2 脚本文件，这会导致一些不必要的问题出现。建议把 SweetAlert2 脚本放在公共JS库中统一管理，有助于维护代码的健康运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/162578