当前位置：首页 > VUE

vue实现加载条

2026-03-08 11:41:47VUE

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()
})

自定义加载条组件

创建一个 LoadingBar 组件：

<template>
  <div class="loading-bar" :style="{ width: progress + '%' }"></div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0
    }
  },
  methods: {
    start() {
      this.progress = 0
      this.simulateProgress()
    },
    simulateProgress() {
      const interval = setInterval(() => {
        if (this.progress >= 100) {
          clearInterval(interval)
          return
        }
        this.progress += 10
      }, 300)
    },
    finish() {
      this.progress = 100
    }
  }
}
</script>

<style>
.loading-bar {
  height: 3px;
  background-color: #42b983;
  position: fixed;
  top: 0;
  left: 0;
  transition: width 0.3s;
  z-index: 9999;
}
</style>

在全局使用自定义加载条

在 main.js 中注册为全局组件：

import LoadingBar from './components/LoadingBar.vue'

Vue.component('loading-bar', LoadingBar)

// 创建事件总线
const eventBus = new Vue()
Vue.prototype.$eventBus = eventBus

在需要的地方触发加载：

// 开始加载
this.$eventBus.$emit('start-loading')

// 结束加载
this.$eventBus.$emit('finish-loading')

结合 Axios 拦截器实现请求加载条

在 axios 拦截器中添加加载逻辑：

import axios from 'axios'

let requestsCount = 0

axios.interceptors.request.use(config => {
  requestsCount++
  if (requestsCount === 1) {
    this.$eventBus.$emit('start-loading')
  }
  return config
})

axios.interceptors.response.use(response => {
  requestsCount--
  if (requestsCount === 0) {
    this.$eventBus.$emit('finish-loading')
  }
  return response
}, error => {
  requestsCount--
  if (requestsCount === 0) {
    this.$eventBus.$emit('finish-loading')
  }
  return Promise.reject(error)
})

使用 Vue 过渡效果增强体验

为加载条添加平滑过渡效果：

vue实现加载条

.loading-bar-enter-active, .loading-bar-leave-active {
  transition: opacity 0.5s;
}
.loading-bar-enter, .loading-bar-leave-to {
  opacity: 0;
}

这些方法提供了从简单到复杂的多种实现方式，可以根据项目需求选择合适的方案。第三方库方案适合快速集成，自定义组件方案则提供更多灵活性。

标签: 加载 vue

分享给朋友：

vue交互实现

Vue 交互实现方法 Vue.js 提供了多种方式实现用户交互，包括事件处理、表单绑定、动态渲染等。以下是常见的交互实现方法：事件处理通过 v-on 或 @ 指令绑定事件，触发方法或直接执行表达…

vue实现签章

Vue 实现签章功能签章功能通常包括手写签名、电子印章等。以下是基于 Vue 的实现方法：使用 canvas 实现手写签名安装依赖（如需要）： npm install signatu…

vue实现定时

Vue 实现定时功能的方法使用 setInterval 和 clearInterval 在 Vue 中可以通过 setInterval 和 clearInterval 实现定时功能。在组件的 mou…

vue实现导入

Vue 实现文件导入功能使用 <input type="file"> 元素在 Vue 模板中添加一个文件输入元素，绑定 change 事件处理函数。 <template>…

vue实现tabbar

Vue 实现 TabBar 的方法使用 Vue Router 实现基础 TabBar 安装 Vue Router 依赖： npm install vue-router 创建路由配置文件（route…

vue框架实现

Vue 框架实现方法 Vue 是一个渐进式 JavaScript 框架，适用于构建用户界面。以下是一些核心实现方法，涵盖基本使用、组件化、状态管理和优化技巧。基本项目搭建使用 Vue CLI…

vue实现加载条