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.

License

MIT