Vue 自定义进度条组件封装及使用方法详解

原创

小焱

发布于 2025-06-07 08:08:48

13900

代码可运行

文章被收录于专栏：前端开发前端开发

运行总次数：0

代码可运行

下面我将为你详细讲解自定义进度条组件的使用方法以及组件封装的具体步骤。

自定义进度条组件使用方法

1. 组件引入与注册

要在项目里使用自定义进度条组件，首先得把组件引入到需要使用它的文件中，然后进行注册。

import CustomProgress from './components/CustomProgress.vue';

export default {
  components: {
    CustomProgress
  },
  // 组件的其他选项
}

2. 基础使用示例

下面是一个基础的使用示例，展示了如何向组件传递基本的数据。

<CustomProgress
  :segmentsData="[
    { value: 30, color: '#409EFF', content: '阶段一' },
    { value: 50, color: '#67C23A', content: '阶段二' },
    { value: 20, color: '#E6A23C', content: '阶段三' }
  ]"
  :totalValue="100"
/>

3. 常用属性配置

组件提供了多个属性，可对进度条的外观和行为进行灵活配置：

segmentsData（必需）：该属性为数组类型，用于定义进度条的各个分段。每个分段对象包含以下字段：
- value（必需）：表示该分段的进度值。
- color（必需）：用于设置该分段的显示颜色。
- content（可选）：是该分段需要显示的文本内容。
totalValue（可选，默认值为100）：它是进度条的总值，各分段的value总和可以超过此值，超出部分会以红色显示。
showContent（可选，默认值为false）：这是一个布尔值，用于控制是否显示分段的内容。
isAnimated（可选，默认值为false）：同样是布尔值，用于控制是否启用进度条的动画效果。

4. 高级使用示例

下面是一个包含各种配置选项的高级使用示例：

<CustomProgress
  :segmentsData="[
    { value: 25, color: '#3498db', content: '数据准备' },
    { value: 45, color: '#2ecc71', content: '处理中' },
    { value: 30, color: '#f39c12', content: '完成' }
  ]"
  :totalValue="100"
  :showContent="true"
  :isAnimated="true"
/>

组件封装方法

1. 组件文件结构

自定义进度条组件的文件结构如下：

components/
  └── CustomProgress/
      ├── CustomProgress.vue    # 主组件文件
      └── index.js              # 组件导出文件（可选）

2. 完整组件代码

下面是完整的组件代码，你可以直接复制到项目中使用：

<template>
  <div class="progress-bar-container">
    <div class="progress-bar-wrapper" :style="{ height: barHeight }">
      <div class="progress-bar" :class="{ 'with-animation': isAnimated }">
        <div
          v-for="(segment, index) in computedSegments"
          :key="index"
          :style="{ width: segment.width, backgroundColor: segment.color }"
          class="progress-segment"
        >
          <div
            v-if="showContent && segment.content"
            class="segment-content"
            :style="{ color: segment.textColor || '#fff' }"
          >
            {{ segment.content }}
          </div>
        </div>
        <div v-if="hasExceed" class="exceed-indicator"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomProgress',
  props: {
    segmentsData: {
      type: Array,
      default: () => []
    },
    totalValue: {
      type: Number,
      default: 100
    },
    showContent: {
      type: Boolean,
      default: false
    },
    isAnimated: {
      type: Boolean,
      default: false
    },
    barHeight: {
      type: String,
      default: '30px'
    }
  },
  computed: {
    computedSegments() {
      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,
          displayValue: isExceed ? this.totalValue - currentValue + segment.value : segment.value
        };
      });
    },
    hasExceed() {
      return this.computedSegments.some(segment => segment.isExceed);
    }
  }
}
</script>

<style scoped>
.progress-bar-container {
  width: 100%;
  margin: 10px 0;
}

.progress-bar-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background-color: #f5f5f5;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

.progress-bar {
  display: flex;
  height: 100%;
  position: relative;
  transition: width 0.6s ease;
}

.progress-segment {
  position: relative;
  height: 100%;
  transition: width 0.6s ease;
}

.segment-content {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 5px;
}

.exceed-indicator {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #e74c3c;
  z-index: 10;
  transition: width 0.6s ease;
}

.with-animation::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: progress-animation 1.5s infinite;
}

@keyframes progress-animation {
  100% {
    transform: translateX(100%);
  }
}
</style>

3. 组件导出与全局注册

如果你希望在整个应用中都能使用这个组件，可以在index.js文件中对其进行导出，并在应用入口处进行全局注册。

// components/CustomProgress/index.js
import CustomProgress from './CustomProgress.vue';

export default {
  install(Vue) {
    Vue.component('CustomProgress', CustomProgress);
  }
};

// main.js（应用入口文件）
import Vue from 'vue';
import App from './App.vue';
import CustomProgress from './components/CustomProgress';

Vue.use(CustomProgress);

new Vue({
  render: h => h(App),
}).$mount('#app');