vue.js做的一些实例进度条

admin 2026年02月09日 13:25 101 0

Vue.js通过组件化方式实现多种进度条实例，常见类型包括线性进度条与环形进度条，利用Vue的响应式数据绑定，动态更新进度值，结合CSS动画或第三方库（如Element UI）实现流畅视觉效果，实例中可通过props传递配置参数（如颜色、尺寸），计算属性处理进度逻辑，适用于文件上传进度、任务加载、数据统计等场景，组件复用性强，可灵活适配不同需求，结合Vue的生命周期钩子实现动态控制，提升交互体验。

Vue.js 进度条实例开发：从基础到实用技巧

在 Web 应用开发中，进度条是常见的 UI 组件，用于直观展示任务进度（如文件上传、数据加载、任务执行等），Vue.js 凭借其响应式数据绑定和组件化开发优势，能够轻松实现灵活、动态的进度条效果，本文将通过多个实例，从基础到进阶，详细介绍如何使用 Vue.js 开发不同类型的进度条,并涵盖实用的开发技巧和最佳实践。

基础静态进度条：模板与样式绑定

最简单的进度条是静态展示，固定显示某个进度值，通过 Vue 的模板语法和样式绑定,可以快速实现一个美观且功能完整的静态进度条。

实现思路

使用 div 模拟进度条容器，内部 div 表示进度条填充部分；
通过 style 动态绑定填充部分的宽度,宽度值与进度数据绑定；
用 CSS 美化进度条样式（如背景色、圆角、过渡效果、阴影等）。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">Vue.js 基础进度条</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    .progress-container {
      width: 300px;
      height: 20px;
      background-color: #f0f0f0;
      border-radius: 10px;
      overflow: hidden;
      margin: 20px 0;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    }
    .progress-bar {
      height: 100%;
      background: linear-gradient(90deg, #42b983 0%, #3aa876 100%);
      transition: width 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 12px;
      font-weight: 500;
    }
    .progress-info {
      margin: 10px 0;
      color: #666;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div id="app">
    <h3>基础进度条：{{ progress }}%</h3>
    <div class="progress-info">
      <span v-if="progress < 30" style="color: #e74c3c;">进度较慢</span>
      <span v-else-if="progress < 70" style="color: #f39c12;">进行中</span>
      <span v-else style="color: #27ae60;">即将完成</span>
    </div>
    <div class="progress-container">
      <div class="progress-bar" :style="{ width: progress + '%' }">
        {{ progress }}%
      </div>
    </div>
  </div>
  <script>
    const { createApp } = Vue;
    createApp({
      data() {
        return {
          progress: 45 // 固定进度值
        };
      }
    }).mount('#app');
  </script>
</body>
</html>

解析

style="{ width: progress + '%' }"：将 progress 数据绑定到进度条的宽度，实现动态调整
transition: width 0.3s ease：CSS 过渡效果，让进度变化更平滑
内部 div 显示百分比文字，直观展示进度值
添加了状态提示功能，根据进度值显示不同的状态文字

动态进度条：模拟任务进度（定时器控制）

实际应用中，进度条往往需要动态变化（如模拟加载、任务执行），结合 Vue 的响应式和定时器，可以实现自动更新的进度条,并提供完整的控制功能。

实现思路

使用 setInterval 定时更新进度数据；
添加"开始"、"暂停"、"重置"按钮控制进度条状态；
清除定时器避免内存泄漏；
添加进度状态指示和完成回调。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">Vue.js 动态进度条</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    .progress-container {
      width: 400px;
      height: 25px;
      background: #e0e0e0;
      border-radius: 12px;
      overflow: hidden;
      margin: 20px 0;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    }
    .progress-bar {
      height: 100%;
      background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
      transition: width 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      font-size: 14px;
    }
    .controls {
      margin: 20px 0;
    }
    button {
      padding: 8px 16px;
      margin: 0 5px;
      border: none;
      border-radius: 5px;
      background: #42b983;
      color: white;
      cursor: pointer;
      transition: background 0.3s;
      font-size: 14px;
    }
    button:hover {
      background: #369f6e;
    }
    button:disabled {
      background: #ccc;
      cursor: not-allowed;
    }
    .status {
      margin: 10px 0;
      font-size: 16px;
      color: #666;
    }
    .status.completed {
      color: #27ae60;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div id="app">
    <h3>动态进度条：{{ progress }}%</h3>
    <div class="progress-container">
      <div class="progress-bar" :style="{ width: progress + '%' }">
        {{ progress }}%
      </div>
    </div>
    <div class="status" :class="{ completed: isCompleted }">
      {{ statusText }}
    </div>
    <div class="controls">
      <button @click="start" :disabled="isRunning || isCompleted">开始</button>
      <button @click="pause" :disabled="!isRunning">暂停</button>
      <button @click="reset" :disabled="isRunning">重置</button>
    </div>
  </div>
  <script>
    const { createApp } = Vue;
    createApp({
      data() {
        return {
          progress: 0,
          isRunning: false,
          isCompleted: false,
          timer: null,
          speed: 1 // 控制进度增长速度
        };
      },
      computed: {
        statusText() {
          if (this.isCompleted) return '任务已完成！';
          if (this.isRunning) return '正在加载...';
          return '准备开始';
        }
      },
      methods: {
        start() {
          if (this.progress >= 100) return;
          this.isRunning = true;
          this.timer = setInterval(() => {
            this.progress += this.speed;
            if (this.progress >= 100) {
              this.pause();
              this.progress = 100;
              this.isCompleted = true;
              this.onComplete();
            }
          }, 100);
        },
        pause() {
          this.isRunning = false;
          if (this.timer) {
            clearInterval(this.timer);
            this.timer =

标签： #Vue实例 #进度条组件