简介
cadulis-toasty 是一个轻量级的 JavaScript 库，它可以帮助我们在网页上快速地弹出通知信息（Toast）。它可以用于任何基于 JavaScript 的 web 应用程序，而且可以很好地与其他框架或库集成。
安装
可以通过 npm 安装：
--- ------- --------------
或者通过 CDN 引入：
------- ---------------------------------------------------------------------------
使用
首先，需要在 HTML 文件中加入 Toast 的容器元素：
---- ----------------------------
然后在 JavaScript 文件中引入并初始化 cadulis-toasty：
------ - ------ - ---- ----------------- ----- ------ - --- ----------------------------
现在，我们就可以调用 toasty 对象上的方法来弹出提示信息了：
------------------------
其他自带的方法有：
-- ---- ------------------------- -- ---- ------------------- -- ---- ----------------------
以上的方法都可以传入第二个参数，用于配置各种参数。例如：
----------------------- - --------- ----- ---
更多配置选项请参考 官方文档。
示例
一个稍微复杂一点的使用示例：
--------- -----
----- ----------
------
----- ----------------
--------------------- ------------
------- ---------------------------------------------------------------------------
-------
----------------- -
--------- ------
---- --
------ --
-------- -----
-
---- -
-------- --- -----
------- -----
-------------- ----
----------------- ---------------
------ ------
---------- -----
------- --------
-
--------
-------
------
---- ----------------------------
------- ----------- -----------------------------------
------- ----------- --------------------------------
------- ----------- --------------------------------
------- ----------- ---------------------------------
--------
----- ------ - --- ----------------------------
-------- ------------- -
----------------------- -
--------- -----
---
-
-------- ---------- -
-------------------------
-
-------- ---------- -
------------------ -
--------- ------
---
-
-------- ----------- -
--------------------- -
------------ -----
---
-
---------
-------
-------在这个示例中，我们定义了四个按钮，点击按钮之后会弹出不同类型的提示信息，具有不同的配置参数。同时，我们也定义了 #toasty-container 这个元素作为 Toast 的容器，并通过 CSS 将其固定在页面右上角。
总结
通过本文的介绍，我们了解了如何使用 cadulis-toasty，以及它的基本用法和配置选项。在实际开发中，弹出提示信息是一件非常常见的事情，cadulis-toasty 为我们提供了一种简单而高效的解决方案。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600567fa81e8991b448e4204