网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
一个Vue Toast组件可按顺序显示可自定义的Toast消息。这意味着新消息将排队,直到隐藏之前的消息为止。
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. 在屏幕上显示基本的烤面包消息。
Vue.$toast.open('Basic Toast Message');
4. 更改通知类型。所有可能的类型:
success
info
warning
error
default
Vue.$toast.open({
message: 'Error Message',
type: 'error'
});
// or
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的位置。
top
bottom
top-right (default)
bottom-right
top-left
bottom-left
Vue.$toast.open({
message: 'Error Message',
position: 'top-right'
});
6. 设置自动消除toast消息之前要等待的时间。默认值:3秒。
Vue.$toast.open({
message: 'Error Message',
duration: '3000'
});
7. 确定toast消息是否可关闭。默认值:true。
Vue.$toast.open({
message: 'Error Message',
dismissible: false
});
8. 确定是否应该将toast消息排队。默认值:false。
Vue.$toast.open({
message: 'Error Message',
queue: true
});
9. 单击/点击toast时执行功能。
Vue.$toast.open({
message: 'Error Message',
onDismiss: FUNCTION
});
转载请注明来源:按顺序显示Vue Toast消息组件(vue-toast-notification)
本文永久链接地址:https://www.moyouyouw.cn/code/1205.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论