https://github.com/frehaiku/vue-toast

A Vue1 component for showing friendly operation tip to user. :white_check_mark:
https://github.com/frehaiku/vue-toast

javascript toast vue vue-cli vue-component vue1 vuejs

Last synced: 9 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/frehaiku/vue-toast
• Owner: frehaiku
• License: mit
• Created: 2017-03-02T12:39:38.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-06-04T12:26:51.000Z (over 7 years ago)
• Last Synced: 2024-10-29T23:23:28.705Z (19 days ago)
• Topics: javascript, toast, vue, vue-cli, vue-component, vue1, vuejs
• Language: JavaScript
• Homepage: https://frehaiku.github.io/vue-toast/
• Size: 255 KB
• Stars: 25
• Watchers: 2
• Forks: 30
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue-Toast

> A Vue component for showing friendly operation tip to user.  

[vue2+ version is working](https://github.com/frehaiku/vue-toast/tree/vue2)

## Install

Using `npm` to install `vue-cushy-toast`

```bash

npm install vue-cushy-toast

```

## Usage

In your `.vue` file

```html

  

    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')

            },

      }

```

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