Vue Loading Overlay：简洁高效的加载指示器组件

介绍

在现代Web应用中，为了提升用户体验，加载指示器是一个必不可少的组件。尤其在处理异步请求或其他耗时操作时，加载指示器可以有效地告知用户当前的状态。Vue Loading Overlay 是一个为 Vue.js 应用提供全屏加载指示器的组件，简洁高效，易于集成和使用。

本文将介绍什么是 Vue Loading Overlay、其主要功能及其使用方法，并展示如何在项目中集成和使用这个组件。

什么是 Vue Loading Overlay？

Vue Loading Overlay 是一个 Vue.js 组件，用于在页面加载时显示全屏或局部加载指示器。它可以轻松集成到 Vue.js 项目中，通过简单的配置和调用即可实现加载指示器的显示和隐藏。

主要功能

Vue Loading Overlay 提供了一系列强大的功能，使其成为加载指示器的理想选择：

全屏和局部加载：支持全屏加载指示器和局部加载指示器，满足不同场景的需求。
可取消加载：允许用户通过按下 ESC 键或点击外部区域取消加载。
多种样式：支持多种加载样式，包括 spinner、dots 和 bars，用户可以根据需求选择合适的样式。
高度可定制：提供丰富的配置选项，用户可以自定义加载指示器的颜色、大小、背景色、透明度等。
插件模式：支持作为插件使用，方便在全局范围内进行配置和调用。

安装

使用 npm 安装 Vue Loading Overlay：

1	npm install vue-loading-overlay@^6.0

使用方法

作为组件使用

以下是一个基本的示例，展示了如何在 Vue 组件中使用 Vue Loading Overlay：

<template>
    <div class="vl-parent">
        <loading v-model:active="isLoading"
                 :can-cancel="true"
                 :on-cancel="onCancel"
                 :is-full-page="fullPage"/>

        <label><input type="checkbox" v-model="fullPage">Full page?</label>
        <button @click.prevent="doAjax">Fetch Data</button>
    </div>
</template>

<script>
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/css/index.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>

作为插件使用

你可以将 Vue Loading Overlay 作为插件在全局范围内进行使用：

import {createApp} from 'vue';
import {LoadingPlugin} from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/css/index.css';

// Your app initialization logic goes here
const app = createApp({});
app.use(LoadingPlugin);
app.mount('#app');

在组件中使用插件：

<template>
    <form @submit.prevent="submit"
          class="vl-parent"
          ref="formContainer">
        <!-- your form inputs go here-->
        <label><input type="checkbox" v-model="fullPage">Full page?</label>
        <button type="submit">Login</button>
    </form>
</template>

<script>
export default {
    data() {
        return {
            fullPage: false
        }
    },
    methods: {
        submit() {
            let loader = this.$loading.show({
                // Optional parameters
                container: this.fullPage ? null : this.$refs.formContainer,
                canCancel: true,
                onCancel: this.onCancel,
            });
            // simulate AJAX
            setTimeout(() => {
                loader.hide()
            }, 5000)
        },
        onCancel() {
            console.log('User cancelled the loader.')
        }
    }
}
</script>

配置选项

Vue Loading Overlay 提供一系列配置选项，用户可以根据需求进行自定义：

active：Boolean，默认 false，是否默认显示加载指示器。
can-cancel：Boolean，默认 false，是否允许用户取消加载。
on-cancel：Function，加载取消时的回调函数。
is-full-page：Boolean，默认 true，是否全屏显示加载指示器。
color：String，加载指示器的颜色。
background-color：String，加载指示器背景色。
opacity：Number，背景透明度。
loader：String，加载指示器的样式，可选值为 spinner、dots、bars。

常见问题

1. 不同标签页加载无限循环

在不同标签页切换时，加载指示器可能会出现无限循环的问题。可以参考此问题的讨论。

2. 全局实例与局部实例冲突

使用 useLoading 方法时，与其他插件（如 vue-router）的实现不一致，可能会导致全局配置失效。可以参考此问题的讨论。

结论

Vue Loading Overlay 是一个强大且灵活的加载指示器组件，适用于各种 Vue.js 项目。通过简单的配置和调用，你可以轻松实现全屏或局部的加载指示器，提升用户体验。如果你正在寻找一个加载指示器组件，不妨尝试一下 Vue Loading Overlay。

希望本文能帮助你更好地了解和使用 Vue Loading Overlay 来提升你的项目体验。