Notyf – 响应式的 JavaScript 通知插件 | 前端开发大前端 W3Cbest

简要教程

notyf.js是一款超级简单的响应式纯js消息通知插件。它使用纯javascript来制作，没有任何外部依赖，通过简单的设置，即可生成漂亮的消息通知效果。

安装

可以通过npm来安装notyf.js消息通知插件。

npm i notyf

使用方法

在页面中引入notyf.min.css和notyf.min.js文件。

<html>
<head>
    ...
    <link rel="stylesheet" type="text/css" href="/path/to/notyf.min.css">
</head>
<body>
    ...
    <script src="/path/to/notyf.min.js" type="text/javascript"></script>
</body>
</html>

初始化插件

notyf.js消息通知插件的使用方法如下：

//创建一个Notyf实例对象
var notyf = new Notyf();
//显示一条警告消息
notyf.error('You must fill out the form before moving forward');
//显示一条成功消息
notyf.success('Your changes have been successfully saved!');

配置参数

notyf.js消息通知插件的可用配置参数如下：

|参数 |类型 |默认值 |描述 |

|delay |Number |2000 |消息通知显示的延迟时间，单位毫秒 |

|alertIcon |String |预定义图标|警告消息显示的图标的class类 |

|confirmIcon|String |预定义图标|成功消息显示的图标的class类 |

下面的例子是消息在用户点击按钮后1秒钟显示，并使用FontAwesome字体图标作为警告框和成功消息框的图标。

var notyf = new Notyf({
    delay: 1000,
    alertIcon: 'icon icon-exclamation-circle',
    confirmIcon: 'icon icon-check-circle'
})

演示地址：https://carlosroso.com/notyf/
github地址：https://github.com/caroso1222/notyf