轻巧而且美丽的Toast通知库– Vue toastification

轻巧而且美丽的Toast通知库– Vue toastification
插件名称 vue-toastification
版本号 v1.7.11
发布时间 2020年4月23日
插件作者 Maronato

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");