Vue 全屏加载指示器插件 - Vue-loading-overlay 安装与配置完全指南

最新推荐文章于 2025-05-19 11:22:44 发布

吴爱望Helena

最新推荐文章于 2025-05-19 11:22:44 发布

阅读量1.1k

点赞数 29

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_01236/article/details/143042892

Vue 全屏加载指示器插件 - Vue-loading-overlay 安装与配置完全指南

vue-loading-overlay Vue.js component for full screen loading indicator :cyclone: 项目地址: https://gitcode.com/gh_mirrors/vu/vue-loading-overlay

项目基础介绍： Vue-loading-overlay 是一个专为 Vue.js 开发的组件，旨在提供全屏或容器内加载指示器，帮助提升用户体验。这个开源项目由 Ankurk91 创建并维护，采用 MIT 许可证发布。它支持Vue.js 2.x及更高版本，提供了丰富的自定义选项，包括加载图标样式、颜色、大小等，并且可以作为全局插件使用，方便集成到任何Vue应用中。

主要编程语言和技术：

主要编程语言：JavaScript（基于Vue.js生态）
关键技术框架：Vue.js, CSS Transitions

准备环境及依赖： 在开始之前，请确保您的开发环境中已经安装了以下工具：

Node.js - 版本建议至少为v20.11或更高。
pnpm（或npm）- 包管理工具，这里推荐使用pnpm v8.x及以上版本以获取最佳体验。
一个代码编辑器，如Visual Studio Code，配备Vue.js相关扩展。

详细安装和配置步骤：

步骤一：初始化项目环境

打开命令行工具，创建一个新的工作目录或者在现有项目中操作。
初始化npm环境（如果你的项目是全新的）：
```
npm init -y
```

步骤二：安装Vue-loading-overlay

使用pnpm或npm安装Vue-loading-overlay及其CSS资源：
```
pnpm install vue-loading-overlay@^6.0 --save
```
或者如果使用npm，则执行：
```
npm install vue-loading-overlay@^6.0 --save
```
同步安装Vue.js（假设您尚未安装），如果你的应用尚未基于Vue.js，需添加Vue.js：
```
pnpm add vue@next
```
这里@next表示安装最新版本的Vue 3.x。

步骤三：引入并配置Vue-loading-overlay

直接在单文件组件中使用：

在你需要使用加载指示器的.vue文件中，首先导入Vue-loading-overlay组件及样式：

<style scoped>
  /* 可选：如果需要覆盖默认样式 */
  @import '~vue-loading-overlay/dist/css/index.css';
</style>

<script>
import Loading from 'vue-loading-overlay';

export default {
  components: { Loading },
  // ...其他代码
};
</script>

作为Vue插件全局使用：

在项目的入口文件（通常是main.js或app.js）中引入并注册Vue-loading-overlay：

import Vue from 'vue'; // 确保Vue已经安装
import LoadingPlugin from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/css/index.css';

Vue.use(LoadingPlugin);

步骤四：在Vue组件中使用加载指示器

示例用法（作为组件）:

<template>
  <div>
    <button @click="showLoader">显示加载器</button>
    <loading v-model:active="show" :is-full-page="true" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    showLoader() {
      this.show = true;
      // 模拟异步操作后关闭加载器
      setTimeout(() => {
        this.show = false;
      }, 2000);
    },
  },
};
</script>