只要有一双真诚的眼睛陪我哭泣,就值得我为生命受苦。------罗曼·罗兰的《欣悦的灵魂》
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 来提升你的项目体验。