Vue全局loading实现
Vue全局Loading的实现方法
在Vue项目中实现全局Loading效果，可以通过以下几种方式：
使用Vue插件封装全局组件
创建一个Loading组件并注册为全局组件，通过Vue.prototype或provide/inject实现全局调用。
// Loading.vue组件
<template>
<div v-if="visible" class="loading-overlay">
<div class="loading-spinner"></div>
</div>
</template>
<script>
export default {
data() {
return {
visible: false
}
},
methods: {
show() {
this.visible = true
},
hide() {
this.visible = false
}
}
}
</script>// main.js注册全局方法
import Loading from '@/components/Loading'
const loading = {
install(Vue) {
const tpl = Vue.extend(Loading)
const instance = new tpl().$mount()
document.body.appendChild(instance.$el)
Vue.prototype.$loading = {
show: () => instance.show(),
hide: () => instance.hide()
}
}
}
Vue.use(loading)结合Vuex状态管理
通过Vuex集中管理Loading状态，实现组件间共享。
// store.js
export default new Vuex.Store({
state: {
loading: false
},
mutations: {
SET_LOADING(state, payload) {
state.loading = payload
}
}
})// 在组件中使用
this.$store.commit('SET_LOADING', true)使用axios拦截器实现请求Loading
在请求拦截器中自动显示Loading，响应拦截器中隐藏。
// http.js
axios.interceptors.request.use(config => {
store.commit('SET_LOADING', true)
return config
})
axios.interceptors.response.use(response => {
store.commit('SET_LOADING', false)
return response
}, error => {
store.commit('SET_LOADING', false)
return Promise.reject(error)
})使用第三方库
如v-loading、Element UI的Loading服务等。
// Element UI示例
import { Loading } from 'element-ui'
let loadingInstance = Loading.service(options)
loadingInstance.close()实现注意事项
- 考虑多次请求时的Loading状态管理
- 添加防抖处理避免频繁闪烁
- 提供自定义样式和文案的能力
- 在SSR环境下需要考虑服务端渲染兼容性
以上方法可根据项目需求选择或组合使用，插件化方案适合中小型项目，Vuex方案适合状态复杂的大型应用。
