当前位置：首页 > VUE

vue进度条实现

2026-02-22 14:42:35VUE

使用原生HTML5 `<progress>` 标签

在Vue中可以直接使用HTML5的<progress>标签实现简单的进度条。

<template>
  <div>
    <progress :value="progressValue" max="100"></progress>
    <button @click="incrementProgress">增加进度</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progressValue: 0
    };
  },
  methods: {
    incrementProgress() {
      this.progressValue = Math.min(this.progressValue + 10, 100);
    }
  }
};
</script>

value绑定动态数据，max设定最大值，适合基础场景。

结合CSS自定义样式

通过CSS美化原生进度条或使用<div>模拟进度条：

vue进度条实现

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

<style>
.progress-container {
  width: 100%;
  height: 10px;
  background-color: #e0e0e0;
  border-radius: 5px;
}
.progress-bar {
  height: 100%;
  background-color: #42b983;
  border-radius: 5px;
  transition: width 0.3s ease;
}
</style>

通过动态绑定style.width实现平滑动画效果。

使用第三方库（如Element UI）

集成UI库如Element UI提供更丰富的进度条组件：

vue进度条实现

<template>
  <el-progress :percentage="progressValue" :color="customColors"></el-progress>
</template>

<script>
export default {
  data() {
    return {
      progressValue: 50,
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 }
      ]
    };
  }
};
</script>

支持渐变颜色、环形进度条等高级功能，需提前安装element-plus。

实现动态加载进度条

模拟异步任务进度更新（如文件上传）：

methods: {
  simulateUpload() {
    const interval = setInterval(() => {
      this.progressValue += Math.floor(Math.random() * 10);
      if (this.progressValue >= 100) {
        clearInterval(interval);
        this.progressValue = 100;
      }
    }, 500);
  }
}

结合axios上传事件监听实际进度：

axios.post('/upload', formData, {
  onUploadProgress: (progressEvent) => {
    this.progressValue = Math.round(
      (progressEvent.loaded / progressEvent.total) * 100
    );
  }
});