vue-loading-status

This is a vue loading

Usage

npm install vue-loading-status --save

import loadingStatus from 'vue-loading-status'

loadingStatus.config.loadingMsg = 'loading'
loadingStatus.config.successMsg = 'success'
loadingStatus.config.emptyMsg = 'empty'
loadingStatus.config.errorMsg = 'error'

Vue.use(loadingStatus)

<template>
    <ul v-if="productList.length">
        <li v-for="item in productList">item product</li>
    </ul>
    <loading-status v-else :status="productListStatus"></loading-status>

    <!-- other option
    <loading-status 
        :status="productListStatus"
        :height="200"
        :global="[true / false]"
    >
    </loading-status>
    -->

</template>

<script>
export default {
    data () {
        return {
            productList: [],
            productListStatus: null
        }
    },
    created () {
        this.productListStatus = [true, 'loading...']
        axios.get('/get-product-list')
            .then(res => {
                if (res.data) {
                    this.productList = res.data
                    this.productListStatus = [1, 'success']
                }
                else {
                    this.productListStatus = [0, 'empty']
                }
            })
            .catch(err => {
                this.productListStatus = [-1, 'error']
            })
    }
}
</script>