vue-toast
vue-toast copied to clipboard
Published
20 hours ago •
frehaiku
frehaiku
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
frehaiku