1. 什么是 bolt-ui-sweetalert
bolt-ui-sweetalert 是一个基于 SweetAlert 的扩展包，提供了更多的弹窗模板、复杂的动画效果和更加灵活的自定义选项，并支持多语言。
2. 安装
可以通过 NPM 或 Yarn 进行安装：
# 使用 NPM npm install bolt-ui-sweetalert --save # 使用 Yarn yarn add bolt-ui-sweetalert
3. 使用
使用前需要先引入对应的样式文件：
<link rel="stylesheet" href="node_modules/bolt-ui-sweetalert/dist/sweetalert.css">
然后在需要使用的页面中引入对应的 JavaScript 文件：
<script src="node_modules/bolt-ui-sweetalert/dist/sweetalert.js"></script>
现在可以在 JavaScript 中使用 SweetAlert 的 API 进行弹窗操作了：
-- -------------------- ---- -------
-- ----
----------- ---------
-- ----------
------
------ ---- --- -------
----- ---- ----- -- ---- -- ------ -------
----- ----------
-------- -----
----------- -----
--
------------------ -- -
-- ------------ -
----------- ---- ---- --- ---- ---------- -
----- ----------
---
- ---- -
---------- ---- -- --------
-
---
-- -----
------
------ -
----- -----------
----- -----
--
----- -
----- ----- --- -- ----- -- -----------
----- -----
--
-------- -
-------- -
----- -----
----- -----
--
------- -
----- ----------
----- -----
--
--
---4. 自定义选项
bolt-ui-sweetalert 不仅支持 SweetAlert 的所有 API，还提供了自定义选项，可以实现更加灵活的弹窗模板和效果。
4.1. 模板选项
模板选项定义了 SweetAlert 弹窗的主要结构和样式，包括标题、文本、按钮等。可以使用内置的模板选项，也可以自定义模板选项。
4.1.1. 内置模板选项
bolt-ui-sweetalert 提供了 5 种内置的模板选项：default、material、bootstrap、dark 和 minimal。
-- -------------------- ---- ------- ------ ------ ------ ----------- ----- ---- --- --- -------- ------------ --------- ---------- --- ------ ------ ------ ----------- ----- ---- --- --- -------- ------------ --------- ----------- --- ------ ------ ------ ----------- ----- ---- --- --- -------- ------------ --------- ------------ --- ------ ------ ------ ----------- ----- ---- --- --- -------- ------------ --------- ------- --- ------ ------ ------ ----------- ----- ---- --- --- -------- ------------ --------- ---------- ---
4.1.2. 自定义模板选项
如果内置模板选项无法满足需求，可以自定义模板选项。模板选项是一个包含 HTML 片段的对象，可以设置标题、文本、按钮等。
-- -------------------- ---- -------
-- -------
------
------ ----------
--------- -
------- ---------- ------------
----- -------- -- - ------ -------- -------------
------- ----------------------
--
---
-- ---------
------
------ ----------
--------- -
----- ----- -------------------------------- ----------------- -- - ------ -------- --------------------------------------
--
---4.2. 动画选项
动画选项定义了 SweetAlert 弹窗的动画效果，包括进入动画、退出动画等。可以使用内置的动画选项，也可以自定义动画选项。
4.2.1. 内置动画选项
bolt-ui-sweetalert 提供了 25 种内置的动画选项。每种动画选项包括 6 种不同的方向：top、right、bottom、left、horizontal 和 vertical。可以使用 animation 属性指定动画选项。
-- -------------------- ---- -------
-- ------
------
------ ---------
---------- -----------------
---
-- ----
------
------ ---------
---------- -
----- --------
---------- ------
--------- ----
--------------- -------
------ ----
--
---4.2.2. 自定义动画选项
如果内置动画选项无法满足需求，可以自定义动画选项。动画选项是一个包含 CSS 类名的对象，可以使用 CSS 定义动画。
-- -------------------- ---- -------
-- -------
------
------ ----------
---------- -
--- --------------------
---- ---------------------
--
---
-- ----------
----------------------------- -
-------- --
---------- ------------------
-------------------- ------
----------------- ------
--------------------------- ------------
-
------------------------------ -
-------- --
---------- -----------------
-------------------- ------
----------------- ----
--------------------------- ------------
-4.3. 自定义选项
除了模板选项和动画选项之外，bolt-ui-sweetalert 还提供了其他自定义选项，包括 icon、buttons、timer、input、imageUrl 和 html。这些选项可以实现更加灵活的弹窗效果。
-- -------------------- ---- -------
-- ----------
------
------ -------------
----- --- --- ---- ---------
----- ---------------------
-------- -
---- ----- - ----
--- ---- - -------
------ -- ----- ------
--
---
-- -----
------
------ --------
----- ----- -- ---- -------
------ -------
---
-- -----
------
------ --------
----- ----- ---- ----- -- - ----------
------ -----
------------------ ------
---
-- ----
------
------ -------
--------- ---------------------
----------- ----
------------ ----
--------- ------- -------
---
-- -- ----
------
------ --- ------
----- ------- --- --- ------- --------- --------- --------- -- ------------------- --- ----- ---- -----------
---5. 总结
bolt-ui-sweetalert 扩展了 SweetAlert 的功能，提供了更加灵活和自定义的弹窗模板和效果，可以满足不同的需求。在使用时，可以根据需要自由设置模板选项、动画选项、图标选项、按钮选项等，提高用户的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c0781e8991b448d9a6a