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" |