Vue 自定义进度条实现方法与应用场景解析

掘金前端

作者 spionbo

2025年6月8日 10:06

在前端开发中，进度条是一种常见的用户界面元素，用于展示任务的完成情况或者指示加载过程。然而，有时候标准的进度条并不能完全满足我们的需求，因此，我们可能需要创建自定义的进度条来实现特定的效果或功能。

在本文中，我将介绍如何使用Vue.js创建一个灵活多样的自定义进度条组件，该组件可以根据传入的数据动态渲染进度段，并且支持动画效果和内容展示。

Vue自定义进度条组件实践

一、组件设计目标

我们的进度条组件应具备以下功能：

接受一个包含进度段数据的数组作为输入。
根据传入的数据动态渲染进度段。
支持动画效果，当启用动画时，进度条会以动画形式展示。
可选择是否展示进度段的内容。
当前进度超出总长时超出部分红色填充。

二、实现步骤

创建Vue组件并定义props 首先，创建一个Vue组件，在组件中定义需要的props。这里我们需要定义一个数组props来接收进度段数据，还需要定义一些布尔类型props来控制是否展示内容、是否启用动画等。

export default {
  name: 'CustomProgress',
  props: {
    segmentsData: {
      type: Array,
      default: () => []
    },
    showContent: {
      type: Boolean,
      default: false
    },
    isAnimated: {
      type: Boolean,
      default: false
    },
    totalValue: {
      type: Number,
      default: 100
    }
  }
}

动态计算各进度段的宽度和样式 在组件的计算属性中，根据传入的进度段数据和总长度，计算每个进度段的宽度和对应的样式。

computed: {
  segments() {
    let currentValue = 0;
    return this.segmentsData.map((segment, index) => {
      const percentage = (segment.value / this.totalValue) * 100;
      const width = `${percentage}%`;
      const isLast = index === this.segmentsData.length - 1;
      const isExceed = currentValue + segment.value > this.totalValue;
      currentValue += segment.value;
      return {
      ...segment,
        width,
        isLast,
        isExceed
      };
    });
  }
}

在模板中使用v-for指令渲染进度段 在模板中，使用v-for指令遍历计算后的segments数组，为每个进度段渲染对应的DOM元素，并根据其属性应用相应的样式。

<template>
  <div class="progress-bar">
    <div
      v-for="(segment, index) in segments"
      :key="index"
      :style="{ width: segment.width, backgroundColor: segment.color }"
      :class="{ 'is-last': segment.isLast, 'is-exceed': segment.isExceed }"
    >
      <div
        v-if="segment.content && segment.value!== 0"
        :class="{ 'is-last': segment.isLast }"
      >
        {{ segment.content }}
      </div>
    </div>
    <div v-if="hasExceed" class="exceed-part"></div>
  </div>
</template>

处理动画效果 为了实现动画效果，我们可以利用CSS的动画特性。当isAnimated为true时，为进度条容器添加特定的类名，触发动画。

/* 定义动画 */
@keyframes ant - progress - active {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}
.is - animated {
  position: relative;
}
.is - animated::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z - index: 3;
  background: #fff;
  opacity: 0;
  animation: ant - progress - active 3s cubic - bezier(0.23, 1, 0.32, 1) infinite;
  content: '';
  cursor: default;
}

在模板中，根据isAnimated的值为进度条容器添加类名：

<template>
  <div class="progress-bar" :class="{ 'is - animated': isAnimated }">
    <!-- 进度段内容 -->
  </div>
</template>

处理超出部分 当当前进度超出总长时，需要将超出部分以红色填充。在计算属性中判断是否有超出部分：

computed: {
  hasExceed() {
    return this.segments.some(segment => segment.isExceed);
  }
}

在模板中，当有超出部分时，渲染一个额外的DOM元素来显示超出部分，并通过CSS设置其样式为红色：

.exceed - part {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: #cc0000;
  z - index: 1;
}

三、组件使用示例

在父组件中使用我们创建的CustomProgress组件，传入相应的数据和配置。

<template>
  <div>
    <CustomProgress
      :totalValue="totalValue"
      :showContent="true"
      :isAnimated="true"
      :segmentsData="segmentsData"
    />
  </div>
</template>
<script>
import CustomProgress from './CustomProgress.vue';
export default {
  components: {
    CustomProgress
  },
  data() {
    return {
      totalValue: 80,
      segmentsData: [
        { value: 20, color: '#0099ff', content: '训练' },
        { value: 40, color: '#00b23b', content: '测试' }
      ]
    };
  }
}
</script>

Vue, 自定义进度条，前端开发，进度条实现方法，应用场景，JavaScript,HTML,CSS, 组件化开发，响应式设计，用户体验，Web 开发，动画效果，交互式组件，前端框架

资源地址： pan.quark.cn/s/35324205c…

四、总结

通过以上步骤，我们成功创建了一个功能丰富的Vue自定义进度条组件。它可以根据不同的数据和配置，灵活地展示进度情况，并且具有动画效果和对超出部分的处理。在实际项目中，你可以根据具体需求对这个组件进行进一步的优化和扩展，比如添加更多的自定义样式选项、支持不同的主题等，以更好地满足项目的UI设计和用户体验要求。

通过这篇文章，你应该对Vue自定义进度条有了初步认识。你在实际应用中，是否有特定的样式或交互需求想融入进度条呢？可以和我分享，咱们进一步探讨如何实现。

普通视图

Vue自定义进度条组件实践

一、组件设计目标

二、实现步骤

三、组件使用示例

四、总结