Vue Toast Notification
made with Vuejs

Vue Toast Notification

这是一个Vuejs的消息通知插件。

相关问答
暂无相关问题
查看全部
简介及使用教程

这是一个Vuejs的消息通知插件

安装

NPM:

npm install vue-toast-notification --save

Yarn

yarn add vue-toast-notification

CDN:

<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<!-- 添加包 -->
<script src="https://cdn.jsdelivr.net/npm/vue-toast-notification"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-toast-notification/dist/theme-default.css" rel="stylesheet">
<!-- 初始化插件 -->
<script>
Vue.use(VueToast);
</script>

使用

import Vue from 'vue';
import VueToast from 'vue-toast-notification';
// 引入主题
import 'vue-toast-notification/dist/dist/theme-default.css';
//import 'vue-toast-notification/dist/dist/theme-sugar.css';

Vue.use(VueToast);
Vue.$toast.open('You did it!');
Vue.$toast.open({/* options */});

// 关闭所有打开的通知
Vue.$toast.clear();

全局配置

初始化的时候可以传入全局参数:

Vue.use(VueToast, {
  position: 'top'
})

options

Vue.$toast.open({/* options */});

message: String 提示的消息

type : String successinfowarningerrordefault的一个,默认是 success

position: String topbottomtop-rightbottom-right,top-leftbottom-left的一个,默认是bottom-right

duration:Number 显示时间,默认是3000

dismissible:Boolean 是否允许用户关闭 默认 false

onClose:Function 用户点击触发事件

queue:Boolean 是否按队列显示 默认 false

示例

简单示例

image.png

作者

Ankur Kumar

@AnkurK91

相关项目

这是一个SweetAlert弹窗组件的Vue实现。
这是一个轻量、易用且美观的提示条通知组件。
这是一个极简化的通知组件。
这是一个简单的警报、确认、提示组件。
这是一个与库无关的通知组件。
这是一个易用、高度可定制化的Vue.js模态框组件库。
这是一个支持图片全屏预览的Vue指令插件。