vue 远程js 组件加载_Vue.js组件用于全屏加载指示器

vue 远程js 组件加载

Vue加载叠加组件 (Vue Loading Overlay Component)

Vue.js component for full screen loading indicator

Vue.js组件用于全屏加载指示器

:point_right: Version 2 documentation is available on v2.x branch.

：point_right： v2.x分支上提供了版本2文档。

演示或JSFiddle (Demo or JSFiddle)

安装 (Installation)

# Yarn
yarn add vue-loading-overlay

# npm
npm install vue-loading-overlay

用法 (Usage)

作为组件 (As component)

<template>
    <div class="vld-parent">
        <loading :active.sync="isLoading" 
        :can-cancel="true" 
        :on-cancel="onCancel"
        :is-full-page="fullPage"></loading>
        
        <label><input type="checkbox" v-model="fullPage">Full page?</label>
        <button @click.prevent="doAjax">fetch Data</button>
    </div>
</template>

<script>
    // Import component
    import Loading from 'vue-loading-overlay';
    // Import stylesheet
    import 'vue-loading-overlay/dist/vue-loading.css';
    
    export default {
        data() {
            return {
                isLoading: false,
                fullPage: true
            }
        },
        components: {
            Loading
        },
        methods: {
            doAjax() {
                this.isLoading = true;
                // simulate AJAX
                setTimeout(() => {
                  this.isLoading = false
                },5000)
            },
            onCancel() {
              console.log('User cancelled the loader.')
            }
        }
    }
</script>

作为插件