vue怎么写一个进度条span组件，总长度固定为蓝色矩形，完成度用黄色填充

要实现一个进度条 span 组件，可以按照以下步骤进行：

1. 创建一个 span 元素作为进度条容器，并设置样式。样式中需要设置进度条的总长度、高度、背景颜色、边框等属性。

2. 在 span 中再嵌套一个 div 元素，作为进度条的填充。设置 div 的样式，包括高度、背景颜色等属性。在 Vue 组件中，可以通过计算属性来动态计算 div 的宽度，从而实现进度条的动态效果。

下面是一个示例代码：

<template>
  <span class="progress-bar">
    <div class="progress-fill" :style="{ width: fillWidth }"></div>
  </span>
</template>

<script>
export default {
  props: {
    progress: {
      type: Number,
      required: true,
      default: 0
    }
  },
  computed: {
    fillWidth() {
      return `${this.progress}%`
    }
  }
}
</script>

<style>
.progress-bar {
  display: inline-block;
  width: 200px;
  height: 10px;
  background-color: #ccc;
  border: 1px solid #666;
}

.progress-fill {
  height: 100%;
  background-color: yellow;
}
</style>

在上面的代码中，props 中的 progress 属性表示进度条的完成度，取值范围为 0 到 100。computed 中的 fillWidth 属性通过模板字符串的方式动态计算出进度条填充的宽度，单位为百分比。在样式中，使用了 flex 布局，使得进度条的填充能够自适应容器的宽度。