Vue全局loading实现

Vue全局Loading的实现方法

使用Vue插件封装全局Loading组件

创建一个独立的Loading组件，通过Vue插件机制注册为全局组件或方法。

<template>
  <div v-if="visible" class="global-loading">
    <div class="loading-spinner"></div>
    <p v-if="text">{{ text }}</p>
  </div>
</template>

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

<style>
.global-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  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 2s linear infinite;
}

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

创建Vue插件并注册

// loading-plugin.js
import LoadingComponent from './LoadingComponent.vue'

const LoadingPlugin = {
  install(Vue) {
    const LoadingConstructor = Vue.extend(LoadingComponent)
    const instance = new LoadingConstructor()
    instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el)

    Vue.prototype.$loading = {
      show(text) {
        instance.show(text)
      },
      hide() {
        instance.hide()
      }
    }
  }
}

export default LoadingPlugin

在main.js中安装插件

import Vue from 'vue'
import LoadingPlugin from './loading-plugin'

Vue.use(LoadingPlugin)

在组件中使用全局Loading

// 显示loading
this.$loading.show('加载中...')

// 隐藏loading
this.$loading.hide()

结合axios拦截器实现请求自动loading

import axios from 'axios'

let loadingCount = 0

axios.interceptors.request.use(config => {
  if (loadingCount === 0) {
    Vue.prototype.$loading.show()
  }
  loadingCount++
  return config
})

axios.interceptors.response.use(
  response => {
    loadingCount--
    if (loadingCount === 0) {
      Vue.prototype.$loading.hide()
    }
    return response
  },
  error => {
    loadingCount--
    if (loadingCount === 0) {
      Vue.prototype.$loading.hide()
    }
    return Promise.reject(error)
  }
)

使用Vuex管理全局Loading状态

// store.js
export default new Vuex.Store({
  state: {
    loading: false,
    loadingText: ''
  },
  mutations: {
    SHOW_LOADING(state, text) {
      state.loading = true
      state.loadingText = text || ''
    },
    HIDE_LOADING(state) {
      state.loading = false
    }
  },
  actions: {
    showLoading({ commit }, text) {
      commit('SHOW_LOADING', text)
    },
    hideLoading({ commit }) {
      commit('HIDE_LOADING')
    }
  }
})

在组件中通过Vuex控制Loading

// 显示loading
this.$store.dispatch('showLoading', '加载中...')

// 隐藏loading
this.$store.dispatch('hideLoading')

以上方法提供了多种实现全局Loading的方案，可以根据项目需求选择适合的方式。插件方式适合简单项目，而结合Vuex的方式更适合大型复杂应用。