Small Toast Library For Vue.js – Vue-Toast

Small Toast Library For Vue.js – Vue-Toast

A Vue component that shows tips to users (just like Android system's toast).

Vue-Toast

A Vue component for showing friendly operation tip to user.
vue2+ version is working

Install

Using npm to install vue-cushy-toast

npm install vue-cushy-toast

Usage

In your .vue file

<template>
  <vue-toast v-ref:toast message="tip..."></vue-toast>
</template>

<script>
    import VueToast from 'vue-cushy-toast'
    export default {
        components: {
          VueToast
        },
        ready () {
              this.$refs.toast.showMessage()
              // your also can manually inject message param
              // this.$refs.toast.showMessage('good job')
            },
      }
</script>

Params

param type description default optional required
message String toast content '' \w No
position String toast location 'bottom middle' 'bottom middle', 'top middle' No
sustain Number toast sustain time (ms) 2000 \d No
animate String toast show animation scale 'opacity', 'scale' No
options Object callback with toast {} Object No

the options params contains two key-value

param type description
onHide Function before show callback
onShow Function after show callback

Methods

  • showMessage(String msg); manually set toast's content

Lisence

MIT

Github Repository

Tags: #VueJs