用vue ant写一个进度条组件

好的，下面是一个简单的进度条组件示例：

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

<script>
export default {
  name: 'ProgressBar',
  props: {
    progress: {
      type: Number,
      required: true,
      default: 0
    }
  },
  computed: {
    percentage () {
      return Math.round(this.progress * 100)
    }
  }
}
</script>

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

  .progress-bar__fill {
    height: 100%;
    background-color: #1890ff;
    transition: width 0.3s ease;
  }
</style>

在这个组件中，我们有一个 `progress` 属性，表示当前的进度，它必须是一个 0-1 之间的小数。我们使用 `percentage` 计算属性将进度转换为百分比，并将其用于进度条的填充宽度。

在样式中，我们定义了一个 `progress-bar` 类，它有一个灰色的背景和一个圆角的外观。我们为填充元素定义了另一个类 `progress-bar__fill`，并使用 `transition` 属性添加了一个简单的动画效果。

我们可以在其他组件中使用这个进度条组件，例如：

<template>
  <div>
    <ProgressBar :progress="0.75" />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    ProgressBar
  }
}
</script>

在这个示例中，我们将进度设置为 0.75，这将在进度条中显示为 75%。