vue3进度条

Vue3 的进度条可以使用 Vue3 自带的 `v-progress` 组件来实现，具体步骤如下：

1. 在 `setup()` 函数中引入 `ref` 和 `computed`：

import { ref, computed } from 'vue';

2. 创建一个 `ref` 变量来存放进度值：

const progressValue = ref(0);

3. 创建一个 `computed` 计算属性来计算进度条的样式：

const progressBarStyle = computed(() => {
  return {
    width: `${progressValue.value}%`
  };
});

4. 在模板中使用 `v-progress` 组件，并绑定进度条样式和进度值：

<template>
  <div>
    <div class="progress-bar" :style="progressBarStyle"></div>
  </div>
</template>

<script>
  import { ref, computed } from 'vue';

  export default {
    setup() {
      const progressValue = ref(0);

      const progressBarStyle = computed(() => {
        return {
          width: `${progressValue.value}%`
        };
      });

      return {
        progressValue,
        progressBarStyle
      };
    }
  }
</script>

<style>
  .progress-bar {
    height: 10px;
    background-color: blue;
    transition: width 0.5s ease-in-out;
  }
</style>

5. 在需要更新进度条的地方，修改 `progressValue` 的值即可：

progressValue.value = 50; // 将进度条设置为 50%

以上是使用 `v-progress` 组件实现进度条的基本步骤，你可以根据自己的需求进行样式和功能的定制。