插件名称 | vue-toastification |
---|---|
版本号 | v1.7.11 |
发布时间 | 2020年4月23日 |
插件作者 | Maronato |
Toastification是针对Vue.js应用程序的轻量级,可配置,非常不错的Toast通知库。
v1.7.11(01/18/2021)
v1.7.10(01/13/2021)
HTMLElement
从运行时prop验证中删除来修复SSR集成 。v1.7.9(01/13/2021)
v1.7.8(09/20/2020)
v1.7.7(09/10/2020)
v1.7.6(05/30/2020)
# 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");