51工具盒子只要有一双真诚的眼睛陪我哭泣，就值得我为生命受苦。------罗曼·罗兰的《欣悦的灵魂》
https://github.com/ankurk91/vue-loading-overlay
demo：
https://ankurk91.github.io/vue-loading-overlay/
Vue Loading Overlay：简洁高效的加载指示器组件 {#vue-loading-overlay简洁高效的加载指示器组件}
介绍 {#介绍}
在现代Web应用中，为了提升用户体验，加载指示器是一个必不可少的组件。尤其在处理异步请求或其他耗时操作时，加载指示器可以有效地告知用户当前的状态。Vue Loading Overlay 是一个为 Vue.js 应用提供全屏加载指示器的组件，简洁高效，易于集成和使用。
本文将介绍什么是 Vue Loading Overlay、其主要功能及其使用方法，并展示如何在项目中集成和使用这个组件。
什么是 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 | hljs bash npm install vue-loading-overlay@^6.0 |
使用方法 {#使用方法}
作为组件使用 {#作为组件使用}
以下是一个基本的示例，展示了如何在 Vue 组件中使用 Vue Loading Overlay：
|------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | hljs html <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 作为插件在全局范围内进行使用：
|-------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 | hljs js 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'); |
在组件中使用插件：
|------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | hljs html <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. 不同标签页加载无限循环 {#1-不同标签页加载无限循环}
在不同标签页切换时，加载指示器可能会出现无限循环的问题。可以参考此问题的讨论。
2. 全局实例与局部实例冲突 {#2-全局实例与局部实例冲突}
使用 useLoading 方法时，与其他插件（如 vue-router）的实现不一致，可能会导致全局配置失效。可以参考此问题的讨论。
结论 {#结论}
Vue Loading Overlay 是一个强大且灵活的加载指示器组件，适用于各种 Vue.js 项目。通过简单的配置和调用，你可以轻松实现全屏或局部的加载指示器，提升用户体验。如果你正在寻找一个加载指示器组件，不妨尝试一下 Vue Loading Overlay。
希望本文能帮助你更好地了解和使用 Vue Loading Overlay 来提升你的项目体验。
