angleguan / vue-toast

A Vue1 component for showing friendly operation tip to user. :white_check_mark:

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