vue2-toast-plugin

A simple toast plugin for vue2.

Usage

Use vue-cli

Install:

npm install vue2-toast-plugin --save

Import:

import Toast from "vue2-toast-plugin";
import "vue2-toast-plugin/dist/style.css";

Vue.use(Toast);

Direct <script> include

It expose the global variable:

Vue.use(VueToast)

You can set the configuration：

Vue.use(Toast, {
    position: 'center',
    duration: 3000,
    wordWrap: true,
    width: '100px'
});

In the component:

export default {
    methods:{
        openCenter(){
            this.$toast('hello');
        },
        openTop(){
            this.$toast('hello', {
                position: 'top',
                duration: 2000
            });
        },
        openWithIcon(){
            this.$toast('hello', {
                position: 'top',
                duration: 2000,
                icon: 'success' //or error
            });
        },
        openWithCallback(){
            this.$toast("hello", function(){
                console.log("done");
            });
        },
        openWithCallback2(){
            this.$toast("hello", {
                position: 'top',
                duration: 2000,
                icon: 'success'
            }, function(){
                console.log("done");
            });
        },
        loading(){
            this.$loading('getting data...');
            let t = this;
            setTimeout(function () {
              t.$loading.close();
            }, 2000)
        }
    }
}

options

Vue.use(Toast, [options])

key	type	value	default
position	string	"top" Ι "center" Ι "bottom"	"center"
duration	number	2000	2000
wordWrap	boolean	true Ι false	false
width	string	"100px"	"auto"