插件名称 | vue-toast-notification |
---|---|
版本号 | v0.6.2 |
发布时间 | 2020年4月18日 |
插件作者 | ankurk91 |
Vue Toast组件可按顺序显示可自定义的Toast消息。这意味着新消息将排队,直到隐藏之前的消息为止。
# Yarn
$ yarn add vue-toast-notification
# NPM
$ npm install vue-toast-notification --save
1.安装并导入vue-toast-notification。
import Vue from 'vue';
import VueToast from 'vue-toast-notification';
import 'vue-toast-notification/dist/index.css';
2.注册组件。
Vue.use(VueToast);
3.在屏幕上显示基本的Toast消息。
Vue.$toast.open('简单的Toast消息');
4.更改通知类型。所有可能的类型:
Vue.$toast.open({
message: '错误消息',
type: 'error'
});
// 或
Vue.$toast.success(message,?options)
Vue.$toast.error(message,?options)
Vue.$toast.warning(message,?options)
Vue.$toast.info(message,?options)
Vue.$toast.default(message,?options)
5.更改Toast的位置。
Vue.$toast.open({
message: '错误消息',
position: 'top-right'
});
6.设置自动消除Toast消息之前要等待的时间。默认值:3秒。
Vue.$toast.open({
message: '错误消息',
duration: '3000'
});
7.确定Toast消息是否可关闭。默认值:true。
Vue.$toast.open({
message: '错误消息',
dismissible: false
});
8.确定是否应将Toast消息排队。默认值:false。
Vue.$toast.open({
message: '错误消息',
queue: true
});
9.单击/点击Toast消息时执行功能。
Vue.$toast.open({
message: '错误消息',
onClose: FUNCTION
});
v0.6.2 (05/30/2021)
v0.6.1 (02/15/2021)
v0.6.0(09/21/2020)
v0.5.4(09/21/2020)
v0.5.3(09/20/2020)
v0.5.0(08/08/2020)
v0.4.1(06/25/2020)