简介
cadulis-toasty 是一个轻量级的 JavaScript 库，它可以帮助我们在网页上快速地弹出通知信息（Toast）。它可以用于任何基于 JavaScript 的 web 应用程序，而且可以很好地与其他框架或库集成。
安装
可以通过 npm 安装：
npm install cadulis-toasty
或者通过 CDN 引入：
<script src="https://unpkg.com/cadulis-toasty/dist/cadulis-toasty.min.js"></script>
使用
首先，需要在 HTML 文件中加入 Toast 的容器元素：
<div id="toasty-container"></div>
然后在 JavaScript 文件中引入并初始化 cadulis-toasty：
import { Toasty } from 'cadulis-toasty';
const toasty = new Toasty('#toasty-container');现在，我们就可以调用 toasty 对象上的方法来弹出提示信息了：
toasty.success('操作成功！');其他自带的方法有：
// 消息提示
toasty.info('这是一条消息提示！');
// 警告提示
toasty.warn('注意！');
// 错误提示
toasty.error('操作失败！');以上的方法都可以传入第二个参数，用于配置各种参数。例如：
toasty.success('操作成功！', {
duration: 5000,
});更多配置选项请参考 官方文档。
示例
一个稍微复杂一点的使用示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------- ------------
------- ---------------------------------------------------------------------------
-------
----------------- -
--------- ------
---- --
------ --
-------- -----
-
---- -
-------- --- -----
------- -----
-------------- ----
----------------- ---------------
------ ------
---------- -----
------- --------
-
--------
-------
------
---- ----------------------------
------- ----------- -----------------------------------
------- ----------- --------------------------------
------- ----------- --------------------------------
------- ----------- ---------------------------------
--------
----- ------ - --- ----------------------------
-------- ------------- -
----------------------- -
--------- -----
---
-
-------- ---------- -
-------------------------
-
-------- ---------- -
------------------ -
--------- ------
---
-
-------- ----------- -
--------------------- -
------------ -----
---
-
---------
-------
-------在这个示例中，我们定义了四个按钮，点击按钮之后会弹出不同类型的提示信息，具有不同的配置参数。同时，我们也定义了 #toasty-container 这个元素作为 Toast 的容器，并通过 CSS 将其固定在页面右上角。
总结
通过本文的介绍，我们了解了如何使用 cadulis-toasty，以及它的基本用法和配置选项。在实际开发中，弹出提示信息是一件非常常见的事情，cadulis-toasty 为我们提供了一种简单而高效的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567fa81e8991b448e4204