用vue封装一个随数字大小进度条跟着改变的进度条

好的，我可以为您提供一个基本的 Vue 进度条组件，它会根据传入的百分比值来改变自身的宽度。

<template>
  <div class="progress-bar" :style="{ width: percentage + '%' }"></div>
</template>

<script>
export default {
  props: {
    percentage: {
      type: Number,
      required: true,
      validator: (value) => value >= 0 && value <= 100
    }
  }
}
</script>

<style>
.progress-bar {
  height: 10px;
  background-color: #ccc;
  transition: width 0.3s;
}
</style>

在这个组件中，我们定义了一个 `percentage` 属性来表示进度条的百分比，然后在模板中使用 `:style` 绑定来动态设置进度条的宽度。

在父组件中，您可以通过传递一个 `percentage` 值来更新进度条的状态，例如：

<template>
  <div>
    <button @click="increase">Increase Progress</button>
    <button @click="decrease">Decrease Progress</button>
    <progress-bar :percentage="progress"></progress-bar>
  </div>
</template>

<script>
import ProgressBar from './ProgressBar.vue'

export default {
  components: {
    ProgressBar
  },
  data() {
    return {
      progress: 50
    }
  },
  methods: {
    increase() {
      this.progress = Math.min(this.progress + 10, 100)
    },
    decrease() {
      this.progress = Math.max(this.progress - 10, 0)
    }
  }
}
</script>

在这个例子中，我们定义了一个 `progress` 数据属性来表示进度条的当前状态，并使用两个按钮来增加或减少进度条的值。然后，我们将 `progress` 值传递给 `progress-bar` 组件的 `percentage` 属性，进度条就会根据这个值进行更新。

我希望这个例子对您有所帮助！