51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

vue-loading-overlay

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

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 提供了一系列强大的功能,使其成为加载指示器的理想选择:

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

安装 {#安装}

使用 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,加载指示器的样式,可选值为 spinnerdotsbars

常见问题 {#常见问题}

1. 不同标签页加载无限循环 {#1-不同标签页加载无限循环}

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

2. 全局实例与局部实例冲突 {#2-全局实例与局部实例冲突}

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

结论 {#结论}

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

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

赞(3)
未经允许不得转载:工具盒子 » vue-loading-overlay