/vue-toast

toast plugin for Vue.js

Primary LanguageJavaScript

Vue-Toast-Plugin

A toast plugin for Vue.js.

Features

  • Supports both Vue 1.x and 2.x
  • Simple

Installation

npm i vue-toast

Usage

Need to use with webpack because css is imported in js for convenient.

index.js

import Vue from 'vue'
import Toast from 'vue-toast'

Vue.use(Toast)

App.vue

export default {
  methods:{
            defaultt () {
                this.Toast({
                    text:'hello,lyseky!',
                    type:'default',
                    position:'top',
                    duration:'2000'
                })
            },
            info () {
                this.Toast({
                    text:'hello,lyseky!',
                    type:'info',
                    position:'bottom',
                    duration:'2000'
                })
            },
            success () {
                this.Toast({
                    text:'hello,lyseky!',
                    type:'success',
                    position:'middle',
                    duration:'2000'
                })
            },
            warning () {
                this.Toast({
                    text:'hello,lyseky!',
                    type:'warning',
                    position:'middle',
                    duration:'2000'
                })
            },
            error () {
                this.Toast({
                    text:'hello,lyseky!',
                    type:'error',
                    position:'middle',
                    duration:'2000'
                })
            }
        }
}

Options

Option Description Value Default
text content of the toast
type type of the toast 'default' 'success' 'warning' 'info' 'error'
position position of the toast 'middle' 'top' 'bottom'
duration time before the toast vanishes, in millisecond 4000