介紹

Notyf是一個簡單，響應迅速，兼容性強，無依賴，原生的JavaScript Toast庫。有時候我們在開發項目的時候，不一定某一個框架全部都能夠滿足需求，有一些邊邊角角的可能得集成以下一些小插件才能滿足我們的需求，Notyf是一個原生的無依賴的瀏覽器通知提示插件，可以很好的集成到任何Web項目中。

開源首頁

https://github.com/caroso1222/notyf

相關特性

安裝

使用

最簡單的原生使用方式，將css和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!');

模塊化使用

import { Notyf } from 'notyf';
import 'notyf/notyf.min.css'; // for React and Vue

// Create an instance of Notyf
const notyf = new Notyf();

// Display an error notification 
notyf.error('Please fill out the form');

API

創建Notyf實例時，可以設置一些配置：

• new Notyf([options])

以上三個配置分別表示通知的持續時間，是否以漣漪效應顯示通知

• INotyfNotificationOptions

自定義配置界面

以上是瀏覽器翻譯的效果，相信也都能看得懂

• INotyfIcon

配置界面定義圖標

總結

Notyf是一個用於Web應用的通知提示小插件，有需要的同學可以Notyf是一個用於Web應用的通知提示小插件，有需要的同學可以嘗試下！

PS：頭條後臺的代碼塊調整，如有查看不完整的可以直接訪問Github地址