Vue动态进度条两种实现方式超详细教程轻松上手

文章目录▼CloseOpen

• 纯Vue原生写动态进度条：轻量化还能随便改
  • 第一步：搭好基础结构，核心是“数据绑定”
  • 第二步：让进度“动”起来——动态更新数值
  • 第三步：优化细节——让进度条更“有温度”
• 用Element Plus快速搭动态进度条：省时间还稳
  • 第一步：快速搭建基础结构
  • 第二步：自定义样式——解决“和项目不搭”的问题
  • 第三步：加交互——让进度条“会说话”
• 两种方式怎么选？我整理了张对比表
• 最后再给你提个醒：我踩过的雷你别踩
  • 纯Vue原生和Element Plus方案该怎么选？
  • Element Plus的进度条样式能完全改成项目风格吗？
  • 进度条数值更新时卡顿怎么办？
  • 怎么给进度条加百分比文字提示？
  • 进度数值超过100%或低于0%怎么办？

文章会从核心逻辑（数据绑定、动态更新）到细节优化（过渡动画、样式自定义），逐一拆解每一步操作：原生方案教你用v-bind绑定进度值、通过计算属性处理百分比，甚至手动实现平滑过渡；UI库方案则带你快速配置组件参数，搞定进度条的状态切换与事件监听。全程配套可直接复制的代码示例和避坑提示，不管是刚入门Vue的新手，还是想优化组件的老开发者，都能跟着步骤“照做就会”，轻松把动态进度条融入自己的项目。

你有没有过这样的情况？做文件上传、课程进度或者任务加载功能时，想加个动态进度条，要么写原生代码卡动画，要么用UI库又和项目风格不搭？前两个月帮朋友做他的Vue项目时，就碰到这事儿——他要做一个课程学习进度条，既要实时更新，又要和项目的莫兰迪色风格统一，试了好几种方法都“不对味”：用原生JS写的进度条和Vue的响应式冲突，用第三方组件又改不动样式，急得他直挠头。后来我给他拆了两种最实用的实现方式，一个纯Vue原生手写（轻量化还能随便改），一个用Element Plus快速搭（省时间还稳），没想到不到半天就搞定了，效果比他预期的还好。今天就把这两套方法掰碎了讲给你听，没接触过Vue进阶的也能跟着做。

纯Vue原生写动态进度条：轻量化还能随便改

我教朋友的第一套方案，是纯Vue原生实现——没有任何第三方依赖，好处是“想怎么改就怎么改”，完全贴合项目风格。当时我带他一步步做，连他这种“Vue刚入门”的选手都能跟着走，你肯定也没问题。

第一步：搭好基础结构，核心是“数据绑定”

先新建一个ProgressBar.vue组件——模板里就放两个div：外层是进度条的“容器”（负责定大小、边框、背景），内层是“进度条本体”（负责显示当前进度）。比如：

 

 
<div class="progress-inner" style="{ width: ${safeProgress}% }">
 

然后在data里加个progressValue（初始设为0），再写个computed属性safeProgress——这步很关键！我朋友当时直接绑了progressValue，结果不小心把数值设成120，进度条直接溢出容器，丑得不行。所以用computed把数值限制在0-100之间：

export default {
 data() {
 return {
 progressValue: 0 // 初始进度0%
 };
 },
 computed: {
 safeProgress() {
 // 确保进度不超过100%，不低于0%
 return Math.min(Math.max(this.progressValue, 0), 100);
 }
 }
};

样式部分也简单：容器设个固定高度（比如8px）、圆角（4px）、背景色（比如#e5e7eb）；内层加个过渡动画（transition: width 0.3s ease），这样进度变化时会“平滑移动”而不是“跳着走”。我朋友当时给内层加了莫兰迪渐变：background: linear-gradient(to right, #647eff, #7f53ac)，出来的效果特别高级。

第二步：让进度“动”起来——动态更新数值

进度条的核心是“实时变”，比如文件上传时要监听进度，课程学习进度要从后端拿数据。我朋友的场景是从后端获取用户学习进度，所以我教他用watch监听props里的learnProgress（父组件传过来的学习进度）：

props: {
 learnProgress: {
 type: Number,
 default: 0
 }
},
watch: {
 learnProgress(newVal) {
 // 把父组件传的进度赋值给progressValue
 this.progressValue = newVal;
 }
}

要是你做的是文件上传进度，可以用axios的onUploadProgress事件：

// 比如上传文件的方法
uploadFile(file) {
 axios.post('/upload', file, {
 onUploadProgress: (progressEvent) => {
 // 计算上传进度百分比
 const percent = Math.round((progressEvent.loaded / progressEvent.total)  100);
 this.progressValue = percent;
 }
 });
}

朋友当时试了这个方法，上传文件时进度条慢慢往前走，比他之前用setInterval模拟的真实多了——他说“原来不是我写得差，是没找对监听事件”。

第三步：优化细节——让进度条更“有温度”

原生方法的好处是能加各种自定义细节，我给朋友加了两个小功能，直接把进度条从“能用”变成“好用”：

 @keyframes bounce {
 0% { transform: scaleX(1); }
 50% { transform: scaleX(1.05); }
 100% { transform: scaleX(1); }
 }
 
朋友加了这两个细节后，用户反馈说“这个进度条看起来比之前的‘死’进度条亲切多了”——你看，有时候不是要写多复杂的代码，而是要把细节做进用户心里。
用Element Plus快速搭动态进度条：省时间还稳
要是你觉得原生写着麻烦，或者项目里已经用了Element Plus，那直接用UI库的组件绝对是最优解——我帮朋友搭这个只用了10分钟，基本是“拖组件+绑数据”就能成。
第一步：快速搭建基础结构
先确保项目里装了Element Plus（npm i element-plus），然后在需要用进度条的地方导入ElProgress组件：

vue

<!-

<!-

import { ElProgress } from ‘element-plus’;

import { ref, computed } from ‘vue’;

const progressValue = ref(0);

const safeProgress = computed(() => {

return Math.min(Math.max(progressValue.value, 0), 100);

});

是不是超简单？Element Plus的

ElProgress默认就有过渡动画、状态色和基础样式，不用自己写css——朋友当时看到这个，直呼“之前怎么没发现这么好用的组件”。

第二步：自定义样式——解决“和项目不搭”的问题

朋友当时的顾虑是“UI库的样式改不动”，我告诉他，Element Plus支持自定义颜色和尺寸，比如：

color属性，可以传纯色或者渐变，比如朋友的莫兰迪色：

vue

<!-

stroke-width属性调整进度条高度，比如要8px高：

vue

/deep/ .el-progress__inner）：

css

/deep/ .el-progress__inner {

border-radius: 4px !important; / 和容器圆角一致 */

}

朋友试了这些方法，很快就把Element Plus的进度条改成了项目风格——他说“原来UI库不是‘固定死’的，只是我之前没找对方法”。

第三步：加交互——让进度条“会说话”

Element Plus的进度条还支持状态提示和事件监听，比如：

ElTooltip包着进度条，鼠标 hover 时显示详情：

vue

vue

朋友用这个做了个“课程进度详情”——用户点击进度条，会弹出当前章节的学习情况，比之前的静态文字直观多了。

两种方式怎么选？我整理了张对比表

很多人问我“到底选原生还是UI库？”，我给朋友做了张表，你可以直接对照着挑：

最后再给你提个醒：我踩过的雷你别踩

不管用哪种方式，这几个坑我都踩过，你一定要避开：

props，别直接改props里的变量——Vue的props是单向数据流，直接改会报警告，要像我之前说的，把props赋值给ref或者data里的变量；

requestAnimationFrame优化，比如：

js

function updateProgress(newVal) {

requestAnimationFrame(() => {

progressValue.value = newVal;

});

}

safeProgress才解决。

我朋友用这两种方法做完进度条后，用户留存率比之前高了15%——他说“原来一个小小的进度条，能让用户感觉‘我的操作有反馈’，比加很多花里胡哨的功能有用多了”。你要是也在做进度条的需求，赶紧挑一种试试——要是用原生的，记得加过渡动画；用UI库的，别忘了解决样式冲突。试完了欢迎回来告诉我效果，要是碰到问题，我帮你参谋参谋！

很多人问我Element Plus的进度条能不能完全改成项目风格，其实我之前帮朋友改的时候也纠结过这事儿——能改，但不是“完全”想怎么来就怎么来，得看你要改到什么程度。比如朋友当时要的莫兰迪渐变，直接在Element Plus的进度条上用color属性写linear-gradient(to right, #647eff, #7f53ac)，就能把进度条的颜色换成他要的渐变；要是觉得进度条太细，加个stroke-width="8"，直接把高度从默认的6px改成8px，跟项目里的按钮高度对齐；甚至圆角不够圆，用/deep/ .el-progress__inner加个border-radius: 4px !important，也能把默认的小圆角改成跟容器一致的弧度。这些基础的样式调整，Element Plus都能搞定，不用写太多额外代码。

但你要是想玩点更极致的，比如给进度条加个“完成时的小对勾”图标，或者把进度条做成斜角的，甚至想让进度条在完成时弹出个小动画气泡，Element Plus就有点“拘着”了——它的组件结构是固定的，比如进度条的内层是.el-progress__inner，外层是.el-progress__bar，你要是想插个图标进去，得自己手动加DOM元素，反而比直接写原生组件麻烦。我朋友那会儿就踩过这坑：他想在进度条完成时加个小对勾，用Element Plus试了半天，要么图标位置不对（要么挡住进度条，要么偏到一边），要么影响进度条的动画（加了图标后，进度条的过渡效果变卡），最后还是换成了纯原生方案——直接在进度条容器里加了个svg对勾，用v-if="safeProgress === 100"控制显示，想怎么调位置（比如top: -5px; right: -10px）、怎么加动画（比如fade-in或者bounce）都随便，比改Element Plus的组件痛快多了。所以要是你只是想调调颜色、高度、圆角这些基础样式，Element Plus完全够用；但要是要极致的个性化，比如加特殊图标、自定义形状，还是直接写原生的更省心。

纯Vue原生和Element Plus方案该怎么选？

可以根据项目需求和开发成本判断：如果项目风格独特、不需要依赖UI库，选纯Vue原生方案（轻量化、样式完全自定义）；如果需要快速开发、项目已使用Element Plus，选UI库方案（开发快、自带状态和动画）。具体可以参考文章中的对比表。

Element Plus的进度条样式能完全改成项目风格吗？

可以部分自定义：通过color属性修改进度条颜色（支持纯色或渐变），stroke-width调整高度，用深度选择器（如/deep/ .el-progress__inner）修改圆角等细节。但样式自定义有一定局限，如果需要极致个性化， 选纯原生方案。

进度条数值更新时卡顿怎么办？

如果进度更新频率高（如每秒多次），可以用requestAnimationFrame优化动画性能，避免复杂的过渡效果（如去掉过度的缩放或旋转动画）；同时确保进度数值是“平滑递增”（而非跳跃式更新），比如文件上传时用onUploadProgress获取真实进度，而非模拟的setInterval。

怎么给进度条加百分比文字提示？

纯原生方案：在进度条容器内加一个span标签，绑定safeProgress显示百分比，用position: absolute定位到容器中间（如top: 50%; left: 50%; transform: translate(-50%, -50%)），颜色设为白色即可；Element Plus方案：可以用ElTooltip包裹进度条，hover时显示百分比，或通过自定义插槽添加文字。

进度数值超过100%或低于0%怎么办？

用计算属性限制边界值，比如文章中的safeProgress：通过Math.min(Math.max(progressValue, 0), 100)确保进度数值在0-100%之间，避免进度条溢出或反向显示。即使父组件传的数值异常，也能保证视觉效果正常。