当前位置：首页 > VUE

vue实现loading组件

2026-01-19 06:07:03VUE

Vue 实现 Loading 组件的方法

基础实现方案

创建一个独立的 Loading.vue 组件文件：

<template>
  <div v-if="isLoading" class="loading-overlay">
    <div class="loading-spinner"></div>
  </div>
</template>

<script>
export default {
  props: {
    isLoading: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style>
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

全局注册方案

在 main.js 中全局注册并使用：

vue实现loading组件

import Vue from 'vue'
import Loading from './components/Loading.vue'

Vue.component('Loading', Loading)

// 或者作为插件使用
const LoadingPlugin = {
  install(Vue) {
    Vue.prototype.$loading = {
      show() {
        // 显示逻辑
      },
      hide() {
        // 隐藏逻辑
      }
    }
  }
}

Vue.use(LoadingPlugin)

使用 Vuex 管理状态

// store.js
export default new Vuex.Store({
  state: {
    isLoading: false
  },
  mutations: {
    setLoading(state, payload) {
      state.isLoading = payload
    }
  }
})

// 组件中使用
<template>
  <Loading :isLoading="$store.state.isLoading" />
</template>

高级实现方案

使用动态导入和异步组件：

vue实现loading组件

// 创建一个高阶组件
const asyncComponent = (componentImport) => {
  const AsyncComponent = () => ({
    component: componentImport,
    loading: LoadingComponent,
    delay: 200,
    timeout: 3000
  })
  return AsyncComponent
}

请求拦截方案

在 axios 拦截器中控制 loading 状态：

let loadingCount = 0

axios.interceptors.request.use(config => {
  loadingCount++
  store.commit('setLoading', true)
  return config
})

axios.interceptors.response.use(response => {
  loadingCount--
  if (loadingCount <= 0) {
    store.commit('setLoading', false)
  }
  return response
}, error => {
  loadingCount--
  if (loadingCount <= 0) {
    store.commit('setLoading', false)
  }
  return Promise.reject(error)
})

第三方库方案

使用现成的 loading 库：

npm install vue-loading-overlay

import Loading from 'vue-loading-overlay'
import 'vue-loading-overlay/dist/vue-loading.css'

Vue.use(Loading)

每种实现方案都有其适用场景，可以根据项目需求选择合适的实现方式。基础方案适合简单场景，全局方案适合大型应用，Vuex 方案适合状态管理复杂的项目，拦截器方案适合需要自动控制 loading 状态的场景。

标签: 组件 vue

分享给朋友：

vue循环数组实现

vue循环数组的实现方法在Vue中循环数组主要通过v-for指令实现，以下是几种常见用法：基本数组循环使用v-for指令遍历数组，可以通过(item, index)的语法获取当前项和索引值：…

vue手动实现弹窗

实现弹窗组件的基本结构在Vue中手动实现弹窗组件，需要创建一个独立的弹窗组件，并通过props控制其显示与隐藏。弹窗组件通常包含遮罩层、内容区域和关闭按钮。 <template>…

vue无限菜单怎么实现

实现 Vue 无限菜单的方法递归组件实现嵌套菜单使用 Vue 的递归组件特性可以轻松实现无限级嵌套菜单。通过组件调用自身的方式处理嵌套数据。 <template> <ul&…

vue中实现显示和隐藏

控制显示与隐藏的方法在Vue中实现元素的显示和隐藏可以通过多种方式完成，以下是常见的几种方法： 1. 使用v-if指令v-if根据条件动态添加或移除DOM元素，适合需要频繁切换的场景。当条件为fa…

vue实现双折线图

实现双折线图的步骤安装必要的依赖库（如 ECharts 或 Chart.js），这里以 ECharts 为例： npm install echarts --save 在 Vue 组件中引入 ECh…

vue实现画圆弧并着色

在 Vue 中实现画圆弧并着色使用 Canvas API 绘制圆弧在 Vue 组件的 mounted 钩子中，通过 Canvas API 绘制圆弧。创建一个 canvas 元素并获取其上下文：…

vue实现loading组件