当前位置：首页 > 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实现图片轮播

使用 Swiper 实现图片轮播安装 Swiper 依赖 npm install swiper 在 Vue 组件中引入 Swiper <template> <div…

vue 实现长列表

Vue 实现长列表的优化方案虚拟滚动技术虚拟滚动是处理长列表的高效方式，仅渲染可视区域内的元素。通过计算滚动位置动态加载和卸载DOM节点，大幅减少内存占用和渲染压力。 <template&…

用vue实现滑动输入条

使用 Vue 实现滑动输入条使用原生 HTML5 input range 实现在 Vue 模板中直接使用 <input type="range">，通过 v-model 绑定数据：…

vue实现一个标签选择

Vue 标签选择组件实现基础实现使用 Vue 的 v-for 和 v-model 指令可以快速实现标签选择功能： <template> <div class="tag-se…

vue实现modal

Vue 实现 Modal 弹窗组件使用 Vue 实现 Modal 弹窗组件可以通过多种方式，包括原生 Vue 组件、第三方库或自定义指令。以下是几种常见方法：原生 Vue 组件实现创建一个基础…

vue实现cs

Vue 实现 CS（Client-Side）渲染的常见方法 Vue.js 是一个用于构建用户界面的渐进式框架，默认采用客户端渲染（CSR）。以下是几种常见的实现方式：使用 Vue CLI 创建项目…

vue实现加载条