当前位置：首页 > VUE

vue实现加载条

2026-03-28 22:34:57VUE

Vue 实现加载条的方法

在 Vue 中实现加载条可以通过多种方式完成，以下是几种常见的方法：

使用 CSS 动画实现基础加载条

通过 CSS 动画和 Vue 的数据绑定，可以创建一个简单的加载条。定义一个进度变量，通过 CSS 过渡效果实现平滑动画。

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

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

<style>
.progress-container {
  width: 100%;
  height: 4px;
  background-color: #f0f0f0;
}

.progress-bar {
  height: 100%;
  background-color: #42b983;
  transition: width 0.3s ease;
}
</style>

使用第三方库（如 NProgress）

NProgress 是一个轻量级的加载条库，可以方便地集成到 Vue 项目中。通过路由钩子或 API 请求拦截器控制加载条的显示和隐藏。

安装 NProgress：

npm install nprogress

在 Vue 项目中使用：

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

NProgress.configure({ showSpinner: false })

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})

自定义带百分比显示的加载条

如果需要显示加载百分比，可以结合 Vue 的计算属性和样式绑定实现更丰富的效果。

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

<script>
export default {
  data() {
    return {
      progress: 0
    }
  },
  methods: {
    simulateProgress() {
      const timer = setInterval(() => {
        if (this.progress >= 100) {
          clearInterval(timer)
        } else {
          this.progress += Math.random() * 10
        }
      }, 500)
    }
  },
  mounted() {
    this.simulateProgress()
  }
}
</script>

<style>
.progress-container {
  width: 100%;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 100%;
  background-color: #4CAF50;
  transition: width 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-text {
  color: white;
  font-size: 12px;
}
</style>

结合 Vuex 实现全局加载状态

对于大型应用，可以使用 Vuex 管理加载状态，实现跨组件共享加载进度。

// store.js
export default new Vuex.Store({
  state: {
    isLoading: false,
    progress: 0
  },
  mutations: {
    SET_LOADING(state, payload) {
      state.isLoading = payload
    },
    SET_PROGRESS(state, payload) {
      state.progress = payload
    }
  }
})

在组件中使用：

vue实现加载条

<template>
  <div v-if="$store.state.isLoading" class="global-progress">
    <div class="progress-bar" :style="{ width: $store.state.progress + '%' }"></div>
  </div>
</template>

这些方法可以根据项目需求灵活选择，从简单到复杂，满足不同的加载条实现场景。