Nice-toast NPM

nice-toast

Intro

nice-toast is a vue plugin which based on vue.js.

Usage

# NPM Download
npm install nice-toast --save

1. import nice-toast globally in `main.js`.

import Vue from 'vue'
import NiceToast from 'nice-toast'
import 'nice-toast/lib/assets/css/toast.css'
Vue.use(NiceToast, {
    // your options
})

2. use nice-toast in component.

<script>
    export default {
        data () {
            return {
                ...
            }
        },
        methods: {
            clickMethod: function (index) {
                // passing into the parameters
                this.$toast('toast', 'bottom')
                // complete example
                this.$toast('tips', 'position', 'duration', 'shape', 'color')
                this.$loading('loading', 'show')
                this.$loading('loading', 'hide')
            }
        }
    }
</script>

Basic API (Customized)

1. Global Config in `main.js`

    const options = {
        position: 'bottom',
        duration: '2000',
        shape: 'rect',
        direction: 'up',
        color: 'deep',
        loading: 1
    }
    Vue.use(toast, options)

2. Configs description

Configs	Types	Default	Description
position	string	`bottom`	the position of toast. `top`, `center`, `bottom`.
duration	number	`2000`	the duration time of toast.
shape	string	`rect`	the shape time of toast. `rect`, `circle`.
direction	string	`up`	the move direction while toast show. `up`, `down`.
color	string	`deep`	the color of toast and text in it. `light`, `deep`.
loading	number	`1`	the loading icon of the loading tip. `1`, `2`, `3`, `4`.