vue实现加载条
Vue 实现加载条的方法
使用第三方库（如 NProgress）
安装 NProgress 库：
npm install nprogress在 Vue 项目中引入并使用：
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 在路由切换时显示加载条
router.beforeEach((to, from, next) => {
NProgress.start()
next()
})
router.afterEach(() => {
NProgress.done()
})自定义加载条组件
创建一个 Vue 组件实现加载条效果：
<template>
<div class="progress-bar" :style="{ width: progress + '%' }"></div>
</template>
<script>
export default {
data() {
return {
progress: 0
}
},
methods: {
start() {
this.progress = 0
this.simulateProgress()
},
simulateProgress() {
if (this.progress < 95) {
this.progress += Math.random() * 10
setTimeout(this.simulateProgress, 300)
}
},
finish() {
this.progress = 100
setTimeout(() => {
this.progress = 0
}, 500)
}
}
}
</script>
<style>
.progress-bar {
height: 3px;
background-color: #42b983;
position: fixed;
top: 0;
left: 0;
transition: width 0.3s;
z-index: 9999;
}
</style>结合 Axios 拦截器实现
在请求时显示加载条：
import axios from 'axios'
axios.interceptors.request.use(config => {
NProgress.start()
return config
})
axios.interceptors.response.use(response => {
NProgress.done()
return response
}, error => {
NProgress.done()
return Promise.reject(error)
})使用 Vue 过渡效果
通过 v-if 和过渡效果实现加载提示：
<template>
<transition name="fade">
<div v-if="loading" class="loading-overlay">
<div class="loading-spinner"></div>
</div>
</transition>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.7);
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>这些方法可以根据项目需求选择使用，第三方库实现更简单，自定义组件灵活性更高。
