当前位置：首页 > VUE

vue实现进度条

2026-02-21 19:02:02VUE

Vue 实现进度条的几种方法

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

Vue 可以结合 HTML5 的 <progress> 标签快速实现基础进度条：

<template>
  <progress :value="progressValue" max="100"></progress>
</template>

<script>
export default {
  data() {
    return {
      progressValue: 30 // 当前进度值
    }
  }
}
</script>

通过绑定 value 和 max 属性控制进度显示，适合简单场景。

自定义 CSS 进度条

通过动态样式绑定实现更灵活的视觉效果：

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

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

这种方法允许完全自定义进度条的颜色、高度和动画效果。

vue实现进度条

使用第三方库（如 Element UI）

对于需要丰富功能的场景，可以使用 UI 框架的进度条组件：

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

<script>
export default {
  data() {
    return {
      progressValue: 65,
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ]
    }
  }
}
</script>

Element UI 提供多种预设样式和配置选项，如渐变色、环形进度条等。

动态加载进度条

结合异步操作实现真实场景的进度模拟：

vue实现进度条

<template>
  <div>
    <button @click="startLoading">开始加载</button>
    <progress :value="progress" max="100"></progress>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0,
      interval: null
    }
  },
  methods: {
    startLoading() {
      this.interval = setInterval(() => {
        this.progress += 10
        if (this.progress >= 100) clearInterval(this.interval)
      }, 500)
    }
  },
  beforeDestroy() {
    clearInterval(this.interval)
  }
}
</script>

通过定时器模拟数据加载过程，适合文件上传等场景。

环形进度条实现

使用 SVG 实现环形进度效果：

<template>
  <div class="circle-progress">
    <svg viewBox="0 0 100 100">
      <circle 
        cx="50" 
        cy="50" 
        r="45" 
        fill="none" 
        stroke="#eee" 
        stroke-width="8"
      />
      <circle
        cx="50"
        cy="50"
        r="45"
        fill="none"
        stroke="#42b983"
        stroke-width="8"
        :stroke-dasharray="circumference"
        :stroke-dashoffset="offset"
      />
    </svg>
    <span>{{ progressValue }}%</span>
  </div>
</template>

<script>
export default {
  props: {
    progressValue: {
      type: Number,
      default: 0
    }
  },
  computed: {
    circumference() {
      return 2 * Math.PI * 45
    },
    offset() {
      return this.circumference * (1 - this.progressValue / 100)
    }
  }
}
</script>

<style>
.circle-progress {
  position: relative;
  width: 100px;
  height: 100px;
}
.circle-progress span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

通过计算 SVG 圆的 stroke-dashoffset 属性实现环形填充效果。