vue-toaster-plugin

vue-toaster

Description

A simple toaster plugin for vue.js.

Usage

Import Style

<link src='node_modules/vue-toaseter/src/vue-toaster.css' rel="stylesheet">

or

require('vue-toaster/src/vue-toaster.css');

Config

use vue-animated-list for animating v-for rendered lists.

var Vue = require('vue')
Vue.use(require('vue-animated-list'))

ES2015

var Vue = require('vue);
var VueToaster = require('vue-toaster-plugin')
Vue.use(VueToaster);
 
var toaster = Vue.toaster({
    target: document.body,
    max: 5,
    time: 3000,
    debug: false,
    close: false
});

ES6

import Vue from 'vue';
import VueToaster from 'vue-toaster-plugin';
 
Vue.use(VueToaster);
 
const toaster = Vue.toaster({
    target: document.body,
    max: 5,
    time: 3000,
    debug: false,
    close: false
});

Toast

toaster.toast({
    type: 'success', // success, warn, error, info. default is info.
    content: 'test',
    delay: 1000, // custom delay time.
});
 
toaster.info('test');
 
toaster.success('test', 2000);
 
toaster.warn('test');
 
toaster.error('test');
 
toaster.destroy();

Todo

Develop

$ npm install

$ npm run build:example

open example/index.html in browser.

Example

http://demo.zfeng.net/vue-toaster/index.html