基于Vue动态实现进度条的两种方式

<template>
  <div id="app">
    <div class="progress-bar">
      <div 
        class="progress" 
        :style="{ width: progress + '%' }"></div>
    </div>
    <button @click="startProgress">Start Progress</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0 // 进度值，初始为 0
    };
  },
  methods: {
    startProgress() {
      let interval = setInterval(() => {
        if (this.progress < 100) {
          this.progress += 5; // 每次增加 5
        } else {
          clearInterval(interval); // 达到100后停止
        }
      }, 1000); // 每秒更新一次
    }
  }
};
</script>

<style scoped>
.progress-bar {
  width: 100%;
  height: 30px;
  background-color: #f3f3f3;
  border-radius: 5px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background-color: #4caf50; /* 进度条的颜色 */
  transition: width 0.5s ease; /* 平滑过渡效果 */
}
</style>

npm install vue-progressbar --save

import VueProgressBar from 'vue-progressbar';

Vue.use(VueProgressBar, {
  color: '#4caf50', // 设置进度条颜色
  failedColor: '#874b4b', // 失败时的颜色
  thickness: '5px', // 设置进度条厚度
  transition: {
    speed: '0.5s', // 进度条平滑过渡的速度
    opacity: '0.8s', // 进度条透明度过渡速度
    termination: 400 // 过渡终止时间
  }
});

<template>
  <div id="app">
    <button @click="startProgress">Start Progress</button>
  </div>
</template>

<script>
export default {
  methods: {
    startProgress() {
      this.$Progress.start(); // 开始进度条
      let progress = 0;
      let interval = setInterval(() => {
        progress += 5;
        this.$Progress.set(progress); // 设置进度条的当前进度
        if (progress >= 100) {
          clearInterval(interval);
          this.$Progress.finish(); // 进度条完成
        }
      }, 500); // 每 500 毫秒增加 5%
    }
  }
};
</script>