当前位置：首页 > VUE

vue实现全局loading

2026-02-19 05:40:13VUE

Vue 实现全局 Loading 的方法

使用 Vuex 管理全局状态

在 Vuex 中定义 loading 状态和 mutations，用于控制 loading 的显示和隐藏。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isLoading: false
  },
  mutations: {
    showLoading(state) {
      state.isLoading = true
    },
    hideLoading(state) {
      state.isLoading = false
    }
  }
})

在组件中使用 mapState 获取 loading 状态，并在模板中根据状态显示 loading。

<template>
  <div>
    <div v-if="isLoading" class="loading-overlay">
      <div class="loading-spinner"></div>
    </div>
    <!-- 其他内容 -->
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['isLoading'])
  }
}
</script>

使用插件封装全局 Loading

创建一个全局 loading 插件，通过 Vue.prototype 添加全局方法。

// loading.js
const Loading = {
  install(Vue) {
    Vue.prototype.$loading = {
      show() {
        // 显示 loading
      },
      hide() {
        // 隐藏 loading
      }
    }
  }
}

export default Loading

在 main.js 中注册插件。

import Loading from './loading'
Vue.use(Loading)

在组件中使用全局 loading。

this.$loading.show()
// 执行异步操作
this.$loading.hide()

使用 axios 拦截器实现请求 loading

在 axios 拦截器中统一处理 loading 的显示和隐藏。

// http.js
import axios from 'axios'
import store from './store'

const instance = axios.create()

instance.interceptors.request.use(config => {
  store.commit('showLoading')
  return config
})

instance.interceptors.response.use(response => {
  store.commit('hideLoading')
  return response
}, error => {
  store.commit('hideLoading')
  return Promise.reject(error)
})

export default instance

使用第三方库实现 loading

安装并引入第三方 loading 库，如 element-ui 的 loading 组件。

import { Loading } from 'element-ui'

let loadingInstance = Loading.service({
  fullscreen: true,
  text: '加载中...'
})

// 关闭 loading
loadingInstance.close()

自定义全局 loading 组件

创建一个全局 loading 组件，并通过动态挂载的方式控制显示和隐藏。

// GlobalLoading.vue
<template>
  <div v-if="isVisible" class="global-loading">
    <div class="loading-content">
      <!-- loading 内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false
    }
  },
  methods: {
    show() {
      this.isVisible = true
    },
    hide() {
      this.isVisible = false
    }
  }
}
</script>

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

import GlobalLoading from './components/GlobalLoading'

const loadingComponent = Vue.extend(GlobalLoading)
const loadingInstance = new loadingComponent().$mount()
document.body.appendChild(loadingInstance.$el)

Vue.prototype.$loading = {
  show: () => loadingInstance.show(),
  hide: () => loadingInstance.hide()
}

vue实现全局loading