vue前端实现进度条，帮忙写个示例

在Vue.js中实现进度条，通常我们会使用HTML、CSS以及Vue组件来完成。下面是一个简单的Vue组件示例，使用`v-bind:style`动态绑定样式来展示进度：

<template>
  <div class="progress-bar">
    <div class="progress-bar__inner" :style="{ width: percent + '%' }"></div>
    <span>{{ progressLabel }}</span> <!-- 进度文本 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      percent: 0, // 当前进度数值，默认0
      progressLabel: '0%', // 进度标签
    };
  },
  methods: {
    updateProgress(newPercent) {
      this.percent = newPercent;
      if (newPercent >= 100) {
        this.progressLabel = '已完成';
      } else {
        this.progressLabel = `${this.percent}%`;
      }
    }, // 更新进度的方法
  },
};
</script>

<style scoped>
.progress-bar {
  position: relative;
  width: 100%;
}

.progress-bar__inner {
  background-color: #ccc; /* 样式可以根据需求自定义 */
  height: 20px; /* 高度也可以调整 */
  transition: width 0.5s ease-in-out;
}
</style>

在这个例子中，当你调用`updateProgress`方法并传入新的百分比值时，进度条的宽度会相应地改变，并更新进度标签。你可以将这个组件添加到其他Vue实例中，并通过props或者计算属性来控制其状态。