Toastification是针对Vue.js应用程序的轻量级，可配置，非常不错的Toast通知库。

主要特点：

• 5种类型：默认，信息，错误，警告，成功。
• 6个职位以满足您的需求。
• 移动友好。它允许您通过拖动和滑动消除Toast。
• 超时后自动关闭。并允许在悬停或焦点不清时自动暂停。
• 自定义图标。
• 以及更多。

变更日志：

v1.7.11（01/18/2021）

• 禁用运行时容器prop验证：无法进行容器prop的运行时验证，因为它需要直接实例与HTMLElement进行比较。

v1.7.10（01/13/2021）

• 删除对仅DOM对象的引用：通过HTMLElement 从运行时prop验证中删除来修复SSR集成 。

v1.7.9（01/13/2021）

• 修复：删除仅DOM对象引用

v1.7.8（09/20/2020）

• 固定的touchstart应该是被动的：touchstart事件被设置为被动

v1.7.7（09/10/2020）

• 更新的开发依赖关系：所有开发依赖关系均更新为最新版本

v1.7.6（05/30/2020）

• Bug修复

安装和下载：

# Yarn
$ yarn add vue-toastification

# NPM
$ npm install vue-toastification --save

使用：

1.安装并导入Vue Toastification。

import Vue from "vue";
import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";

2.注册组件。

Vue.use(Toast, {
  // 这里是注册props
});

3.将Toast通知发送给用户。

this.$toast("我是vue365.cn!", {
  // 这里是Toast
});

4.注册props。

Vue.use(Toast, { 

  // 显示位置：top-right, top-center, top-left, bottom-right, bottom-center, bottom-left.
  position: 'top-right',

  // 将最新的toast放到顶部
  newestOnTop: true,

  // 最大toasts数
  maxToasts: 20,

  // 要使用类的Vue转换或对象的名称
  // 只应用“输入活动”、“保持活动”和“移动”。
  transition: 'Vue-Toastification__bounce',

  // 持续时间（毫秒）
  // 或一个对象: {enter: Number, leave: Number}
  transitionDuration: 750,

  // 允许通过拖动和滑动事件关闭
  draggable: true, 
  draggablePercent: 0.6,

  // 失去焦点时自动暂停
  pauseOnFocusLoss: true,

  // 悬停时自动暂停
  pauseOnHover: true,

  // 单击即关闭
  closeOnClick: true,

  // 超时后自动关闭
  timeout: 5000,

  // 容器元素
  container: document.body,

  // 自定义类
  toastClassName: [],

  // body类
  bodyClassName: [],

  // 显示/隐藏进度条
  hideProgressBar: false,

  // 显示/隐藏关闭按钮
  hideCloseButton: false,

  // 此处显示自定义图标
  icon: true

});

5.Toast选项。这些将覆盖注册选项。

this.$toast("I'm a toast!", { 

  // toast ID
  id: 'auto',

  // 通知类型
  // success, error, default, info 和 warning
  type: 'default'

  // 显示位置：top-right, top-center, top-left, bottom-right, bottom-center, bottom-left.
  position: 'top-right',

  // 允许通过拖动和滑动事件关闭
  draggable: true, 
  draggablePercent: 0.6,

  // 失去焦点时自动暂停
  pauseOnFocusLoss: true,

  // 悬停时自动暂停
  pauseOnHover: true,

  // 单击即关闭
  closeOnClick: true,

  // 超时后自动关闭
  timeout: 5000,

  // 自定义类
  toastClassName: [],

  // body类
  bodyClassName: [],

  // 显示/隐藏进度条
  hideProgressBar: false,

  // 显示/隐藏关闭按钮
  hideCloseButton: false,

  // 此处显示自定义图标
  icon: true,

  // callback
  onClick: function(){}

});

更多API方法。

// 更新选项
this.$toast.updateDefaults(update);

// 取消所有toasts
this.$toast.clear();

// 拒绝一个特定的toast
this.$toast.dismiss(toastId);

// toast的其他方式
this.$toast("Default toast");
this.$toast.info("Info toast");
this.$toast.success("Success toast");
this.$toast.error("Error toast");
this.$toast.warning("Warning toast");

---

官网：https://github.com/Maronato/vue-toastification

演示：https://www.vue365.cn/code_demo.php?id=297

GitHub下载：https://github.com/Maronato/vue-toastification/archive/master.zip