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

变更日志：

v3.3.4（08/25/2020）

• 修复：恢复损坏的IE 11支持

v3.3.3（08/08/2020）

• 错误修正

安装

# yarn
yarn add vue-loading-overlay

# npm
npm install vue-loading-overlay 

用法

作为组件

<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">完整的页面?</label>
        <button @click.prevent="doAjax">获取数据</button>
    </div>
</template>

<script>
    // 导入组件
    import Loading from 'vue-loading-overlay';
    // 导入样式
    import 'vue-loading-overlay/dist/vue-loading.css';
    
    export default {
        data() {
            return {
                isLoading: false,
                fullPage: true
            }
        },
        components: {
            Loading
        },
        methods: {
            doAjax() {
                this.isLoading = true;
                // 模拟AJAX
                setTimeout(() => {
                  this.isLoading = false
                },5000)
            },
            onCancel() {
              console.log('用户取消了加载程序。')
            }
        }
    }
</script>

作为插件

<template>
    <form @submit.prevent="submit" class="vld-parent" ref="formContainer">
        <!-- 表单输入到这里-->
        <label><input type="checkbox" v-model="fullPage">完整的页面?</label>
        <button type="submit">登录</button>
    </form>
</template>

<script>
    import Vue from 'vue';
    // 导入组件
    import Loading from 'vue-loading-overlay';
    // 导入样式
    import 'vue-loading-overlay/dist/vue-loading.css';
    // 初始化插件
    Vue.use(Loading);

    export default {
        data() {
            return {
                fullPage: false
            }
        },
        methods: {
            submit() {
                let loader = this.$loading.show({
                  // 可选参数
                  container: this.fullPage ? null : this.$refs.formContainer,
                  canCancel: true,
                  onCancel: this.onCancel,
                });
                // 模拟AJAX
                setTimeout(() => {
                  loader.hide()
                },5000)                 
            },
            onCancel() {
              console.log('用户取消了加载程序。')
            }                      
        }
    }
</script>