vue 实现loading
实现Loading效果的几种方法
在Vue中实现Loading效果可以通过多种方式，以下列举几种常见的方法：
使用CSS动画实现基础Loading
通过CSS定义旋转动画，结合Vue的条件渲染（v-if/v-show）控制显示状态：
<template>
<div v-if="isLoading" class="loading-spinner"></div>
</template>
<style>
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>使用第三方库（如Element UI）
UI框架通常提供现成的Loading组件：
import { Loading } from 'element-ui'
// 开启loading
let loadingInstance = Loading.service({
lock: true,
text: '加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
// 关闭loading
loadingInstance.close()全局Loading状态管理
结合Vuex实现全局Loading状态控制：
// store.js
const store = new Vuex.Store({
state: {
isLoading: false
},
mutations: {
setLoading(state, isLoading) {
state.isLoading = isLoading
}
}
})
// 组件中使用
<template>
<div>
<spinner v-if="$store.state.isLoading"/>
<main-content v-else/>
</div>
</template>路由导航守卫控制
在页面切换时显示Loading：
router.beforeEach((to, from, next) => {
store.commit('setLoading', true)
next()
})
router.afterEach(() => {
setTimeout(() => {
store.commit('setLoading', false)
}, 500)
})自定义指令实现
创建v-loading指令自动处理加载状态：
Vue.directive('loading', {
bind(el, binding) {
const spinner = document.createElement('div')
spinner.className = 'loading-spinner'
el.appendChild(spinner)
spinner.style.display = binding.value ? 'block' : 'none'
},
update(el, binding) {
const spinner = el.querySelector('.loading-spinner')
if (spinner) {
spinner.style.display = binding.value ? 'block' : 'none'
}
}
})请求拦截器集成
在axios拦截器中自动管理Loading状态：
axios.interceptors.request.use(config => {
store.commit('setLoading', true)
return config
})
axios.interceptors.response.use(
response => {
store.commit('setLoading', false)
return response
},
error => {
store.commit('setLoading', false)
return Promise.reject(error)
}
)每种方法适用于不同场景，可根据项目需求选择合适的方式或组合使用。全局状态管理适合SPA应用，而局部Loading更适合组件级加载控制。
