toastr 实现消息提示

本节我们介绍了一个可以方便的进行消息气泡提醒的库，就是 toastr。

原文档https://github.com/CodeSeven/toastr

这里仅做简单的翻译，方便大家查阅和参考

是我个人的理解和大概翻译，如果出现错误请以官方为准。

示例

// ==UserScript==
// @name         toastr Demo
// @namespace    https://bbs.tampermonkey.net.cn/
// @version      0.1.0
// @description  try to take over the world!
// @author       You
// @require      https://cdn.bootcdn.net/ajax/libs/toastr.js/2.1.4/toastr.min.js
// @resource     CSS https://cdn.bootcdn.net/ajax/libs/toastr.js/2.1.4/toastr.min.css
// @match        https://bbs.tampermonkey.net.cn/*
// @grant        GM_getResourceText
// @grant        GM_addStyle
// @grant        unsafeWindow
// ==/UserScript==

GM_addStyle(GM_getResourceText("CSS"));
toastr.info("Are you the 6 fingered man?");

详细信息

展示警告信息

toastr.warning(
  "My name is Inigo Montoya. You killed my father, prepare to die!"
);

展示成功信息

toastr.success("Have fun storming the castle!", "Miracle Max Says");

展示错误信息

toastr.error(
  "I do not think that word means what you think it means.",
  "Inconceivable!"
);

立即移除 toast 不使用动画

toastr.remove();

立即移除 toast 但使用动画

toastr.clear();

覆盖全局配置的 toast

toastr.success("We do have the Kapua suite available.", "Turtle Bay Resort", {
  timeOut: 5000,
});

使用转义字符

toastr.options.escapeHtml = true;

选项启用关闭按钮

toastr.options.closeButton = true;

也可选择选择覆盖关闭按钮的 HTML 如 : toastr.options.closeHtml = '<button><i class="icon-off"></i></button>';

单击关闭按钮时可以选择覆盖隐藏动画

toastr.options.closeMethod = "fadeOut";
toastr.options.closeDuration = 300;
toastr.options.closeEasing = "swing";

控制显示顺序

toastr.options.newestOnTop = false;

默认为假，如果为真则从上方显示最新

回调

// Define a callback for when the toast is shown/hidden/clicked
toastr.options.onShown = function () {
  console.log("hello");
};
toastr.options.onHidden = function () {
  console.log("goodbye");
};
toastr.options.onclick = function () {
  console.log("clicked");
};
toastr.options.onCloseClick = function () {
  console.log("close button clicked");
};

防止重复

通过与之前的 toast 内容进行匹配来判断重复。

toastr.options.preventDuplicates = true;

超时控制

toastr.options.timeOut = 30; // How long the toast will display without user interaction
toastr.options.extendedTimeOut = 60; // How long the toast will display after a user hovers over it

timeout 为没有用户交互的情况下的显示时间

extendedtimeout 为用户鼠标悬停时，toast 的显示时间

防止自动隐藏

将超时以及悬停超时设置为 0，则一直存在直至被选中

toastr.options.timeOut = 0;
toastr.options.extendedTimeOut = 0;

进度条

视觉上提示用户还有多久用户 toast 过期

toastr.options.progressBar = true;