css +vue3实现圆环进度条根据参数动态变化

可以通过计算属性和绑定样式实现圆环进度条根据参数动态变化。

首先，在 Vue3 中创建一个组件，将参数作为组件的 props 传入。然后，使用计算属性计算出进度条的样式，并将样式绑定到对应的 HTML 元素上。最后，使用 CSS 实现圆环的效果。

下面是一个示例代码：

<template>
  <div class="progress-ring">
    <div class="progress-bar" :style="progressStyle"></div>
    <div class="progress-label">{{ progress }}%</div>
  </div>
</template>

<script>
export default {
  props: {
    progress: {
      type: Number,
      required: true,
    },
  },
  computed: {
    // 计算进度条的样式
    progressStyle() {
      const progress = this.progress <= 100 ? this.progress : 100;
      const rotation = `rotate(${(progress / 100) * 360}deg)`;
      return {
        transform: rotation,
      };
    },
  },
};
</script>

<style scoped>
.progress-ring {
  position: relative;
  width: 100px;
  height: 100px;
}

.progress-bar {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip: rect(0, 50px, 100px, 0);
  background-color: #f2f2f2;
  transform: rotate(0deg);
  z-index: -1;
}

.progress-bar::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip: rect(0, 50px, 100px, 0);
  background-color: #2196f3;
  transform-origin: center center;
}

.progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
  color: #2196f3;
}
</style>

在上面的代码中，我们定义了一个名为 `progress-ring` 的容器，容器中包含一个圆环进度条和一个显示进度百分比的标签。通过计算属性 `progressStyle` 计算出进度条的样式，并将样式绑定到 `progress-bar` 元素上。最后，使用 CSS 实现圆环的效果。

你可以将这个组件作为子组件嵌入到父组件中，在父组件中传入进度参数即可实现根据参数动态变化的圆环进度条。