使用vue3+ts封装环形进度条组件

<template>
  <div class="progress-ring" :style="{ '--progress': progress }">
    <div class="progress-ring__circle" :style="{ '--progress': progress }"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, PropType } from 'vue';

interfaceProps {
  progress: number;
}

defineProps({
  progress: {
    type: Number as PropType<Props['progress']>,
    default: 0,
  },
});
</script>

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

.progress-ring__circle {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: #6c757d;
  animation: progress-ring-spin 1s linear infinite;
  transition: border-color 0.3s;
}

@keyframes progress-ring-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.progress-ring__circle[style*="--progress: 0"] {
  border-color: transparent;
}

.progress-ring__circle[style*="--progress: 1"] {
  border-color: #007bff;
}
</style>

在这个组件中，使用了CSS变量和内联样式来动态设置进度条的进度。<script lang="ts" setup>部分定义了组件的属性，并使用defineProps来声明这些属性。

在<template>部分，使用了一个div元素来包裹一个圆形的div，这个圆形的div通过CSS动画来旋转，并且其边框颜色会根据进度值的变化而变化。

最后，在<style>部分，定义了样式，包括动画和根据进度值变化的边框颜色。

可以将这个组件导入到其他Vue组件中使用，并通过progress属性来设置进度条的进度。例如：

<template>
  <CircularProgressBar :progress="50" />
</template>

<script lang="ts" setup>
import CircularProgressBar from './CircularProgressBar.vue';
</script>