ygtzz / vue-toast

a vue toast component

vue-toast

a modified version from vue-easytoast

Install

npm install vue-toast5 -S

yarn add vue-toast5

QuickStart

require('vue-toast5/dist/vue-toast.css');

// in ES6 modules
import toast from 'vue-toast5';

// in CommonJS
const toast = require('vue-toast5');

// in Global variable
const toast = VueToast.default;

Vue.use(toast);

this.$toast('toast-无参数');
this.$toast('toast-对象参数',{duration:2000});
Vue.toast('toast-回调函数',function(){
    alert('回调函数');
});

Params

Parameter	Type	Default	Description
id	string		the toast's id
msg	string		the message showed in toast
callback	function		the callback function after toast hide
parent	string	body	the parent element to insert toast element
className	string, array		a custom class for toast
horizontalPosition	string	center	Position horizontal of toast. There are 3 pre-defined positions: center,left,right
verticalPosition	string	middle	Position vertical of toast. There are 3 pre-defined positions: middle,top,bottom
duration	number	2000	how long time the toast show,unit is milliscond
mode	string	override	override or queue. If override, the last toast will forcibly flush previous
transition	string	fade	Built-in transitions: fade, slide-[up/down/left/right]. See also Transitions

methods

• Vue.clearToast([id])：remove all toast or special toast by id

Preview