vue-loading-overlay

阿超

发布于 2025-03-04 09:25:37

270

文章被收录于专栏：快乐阿超快乐阿超

只要有一双真诚的眼睛陪我哭泣，就值得我为生命受苦。——罗曼·罗兰的《欣悦的灵魂》

https://github.com/ankurk91/vue-loading-overlay

demo：

https://ankurk91.github.io/vue-loading-overlay/

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：

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>