Toastify一个轻量级的、纯JavaScript的toast通知库

Toastify 是一个轻量级的、纯 JavaScript 的 toast 通知库。它可以用于在网页中创建自定义的通知消息。以下是关于 Toastify 的一些特性和用法：

1. 特性：

   • 多个堆叠通知：Toastify 支持多个通知同时显示在页面上。
   • 可定制：你可以自定义通知的样式、持续时间、背景颜色等。
   • 不阻塞执行线程：Toastify 的通知不会阻塞页面的其他操作。
   • 自定义选项：你可以设置通知文本、持续时间、背景颜色、关闭图标等。

2. 安装和使用：

   • 通过 NPM 安装：运行以下命令将 Toastify 添加到你的项目中。

     npm install --save toastify-js
     

   • 在模块中导入 Toastify：

     import Toastify from 'toastify-js';
     

   • 使用默认的 CSS 样式或自定义样式：

     import "toastify-js/src/toastify.css";
     

3. 创建通知：

   Toastify({
       text: "这是一个通知",
       duration: 3000, // 持续时间（毫秒）
       gravity: "top", // 显示位置（"top" 或 "bottom"）
       position: "left", // 水平位置（"left"、"center" 或 "right"）
       close: true, // 是否显示关闭图标
       style: {
           background: "linear-gradient(to right, #00b09b, #96c93d)",
       },
       onClick: function() {
           // 点击通知后的回调函数
       }
   }).showToast();
   

4. 自定义类和偏移：

   • 添加自定义类：

     Toastify({
         text: "这是一个通知",
         className: "info", // 自定义类名
         style: {
             background: "linear-gradient(to right, #00b09b, #96c93d)",
         }
     }).showToast();
     

   • 添加偏移：

     Toastify({
         text: "这是一个带偏移的通知",
         offset: {
             x: 50, // 水平偏移
             y: 10, // 垂直偏移
         }
     }).showToast();
     

5. 更多选项：

   • 你还可以设置其他选项，如 ariaLive、oldestFirst 等。详细信息请查看 GitHub 页面。