vue实现进度圈效果

使用 SVG 和 CSS 动画实现进度圈

在 Vue 中实现进度圈效果可以通过 SVG 结合 CSS 动画或 JavaScript 动态计算完成。以下是两种常见方法：

方法一：基于 SVG 的环形进度条

通过 SVG 的 <circle> 元素绘制环形路径，利用 stroke-dasharray 和 stroke-dashoffset 控制进度：

<template>
  <div class="progress-circle">
    <svg width="100" height="100" viewBox="0 0 100 100">
      <!-- 背景圆 -->
      <circle
        cx="50"
        cy="50"
        r="45"
        fill="none"
        stroke="#eee"
        stroke-width="10"
      />
      <!-- 进度圆 -->
      <circle
        cx="50"
        cy="50"
        r="45"
        fill="none"
        stroke="#42b983"
        stroke-width="10"
        :stroke-dasharray="circumference"
        :stroke-dashoffset="offset"
        transform="rotate(-90 50 50)"
      />
    </svg>
    <span>{{ progress }}%</span>
  </div>
</template>

<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 0,
      validator: value => value >= 0 && value <= 100
    }
  },
  computed: {
    circumference() {
      return 2 * Math.PI * 45; // 2πr
    },
    offset() {
      return this.circumference * (1 - this.progress / 100);
    }
  }
};
</script>

<style>
.progress-circle {
  position: relative;
  display: inline-block;
}
.progress-circle span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
}
</style>

方法二：使用第三方库（如 vue-progress-path）

对于更复杂的场景，可以集成专门库简化实现：

1. 安装库：

   npm install vue-progress-path

2. 在组件中使用：

   
   <template>
   <progress-circle :progress="progress" :size="100" :thickness="10"/>
   </template>

import { ProgressCircle } from 'vue-progress-path'; import 'vue-progress-path/dist/vue-progress-path.css';

export default { components: { ProgressCircle }, data() { return { progress: 75 } } };

```

方法三：动态过渡效果

通过 Vue 的过渡系统实现平滑动画：

<template>
  <svg width="100" height="100">
    <circle ... />
    <circle
      :style="{ 
        'stroke-dashoffset': animatedOffset,
        transition: 'stroke-dashoffset 0.5s ease-out'
      }"
    />
  </svg>
</template>

<script>
export default {
  watch: {
    progress(newVal) {
      this.animatedOffset = this.circumference * (1 - newVal / 100);
    }
  }
};
</script>

关键参数说明

• stroke-dasharray: 定义虚线的间距（此处设置为周长实现连续效果）
• stroke-dashoffset: 控制虚线起始偏移量（动态计算实现进度变化）
• rotate(-90 50 50): 将进度起点从默认的3点钟方向调整为12点钟方向

扩展功能建议

1. 添加颜色渐变：通过 <linearGradient> 定义 SVG 渐变
2. 多状态样式：根据进度值动态切换 CSS 类名
3. 插槽支持：允许自定义中心文本内容
4. 响应式尺寸：通过 props 接受外部传入的尺寸参数