vue实现进度圈效果

Vue 实现进度圈效果

使用 SVG 和 CSS 动画

通过 SVG 的 circle 元素和 CSS 动画实现动态进度圈效果。以下是一个基础实现示例：

<template>
  <div class="progress-circle">
    <svg width="100" height="100" viewBox="0 0 100 100">
      <circle
        class="progress-background"
        cx="50"
        cy="50"
        r="45"
        fill="none"
        stroke="#e6e6e6"
        stroke-width="8"
      />
      <circle
        class="progress-bar"
        cx="50"
        cy="50"
        r="45"
        fill="none"
        stroke="#42b983"
        stroke-width="8"
        :stroke-dasharray="dashArray"
        :stroke-dashoffset="dashOffset"
      />
    </svg>
    <div class="progress-text">{{ progress }}%</div>
  </div>
</template>

<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 0,
      validator: value => value >= 0 && value <= 100
    }
  },
  computed: {
    dashArray() {
      return Math.PI * 90;
    },
    dashOffset() {
      return this.dashArray * (1 - this.progress / 100);
    }
  }
};
</script>

<style>
.progress-circle {
  position: relative;
  width: 100px;
  height: 100px;
}
.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
}
.progress-bar {
  transition: stroke-dashoffset 0.5s ease;
}
</style>

使用第三方库（如 vue-progress-circle）

对于更复杂的需求，可以使用现成的 Vue 组件库：

安装依赖：

npm install vue-progress-circle

使用示例：

<template>
  <vue-progress-circle
    :progress="progress"
    :size="100"
    :line-width="8"
    :fill-color="'#e6e6e6'"
    :progress-color="'#42b983'"
  />
</template>

<script>
import VueProgressCircle from 'vue-progress-circle';

export default {
  components: {
    VueProgressCircle
  },
  data() {
    return {
      progress: 75
    };
  }
};
</script>

自定义动画效果

通过 Vue 的过渡和动画系统，可以添加更丰富的交互效果：

<template>
  <div class="animated-circle">
    <svg width="120" height="120" viewBox="0 0 120 120">
      <circle
        class="base-circle"
        cx="60"
        cy="60"
        r="50"
      />
      <circle
        class="progress-circle"
        cx="60"
        cy="60"
        r="50"
        :style="circleStyle"
      />
    </svg>
  </div>
</template>

<script>
export default {
  props: ['progress'],
  computed: {
    circleStyle() {
      const circumference = 2 * Math.PI * 50;
      return {
        strokeDasharray: circumference,
        strokeDashoffset: circumference * (1 - this.progress / 100),
        transition: 'stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1)'
      };
    }
  }
};
</script>

<style>
.animated-circle {
  position: relative;
  width: 120px;
  height: 120px;
}
.base-circle {
  fill: none;
  stroke: #eee;
  stroke-width: 8;
}
.progress-circle {
  fill: none;
  stroke: #ff7043;
  stroke-width: 8;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
</style>

响应式设计技巧

确保进度圈在不同设备上表现一致：

.progress-container {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}
.progress-circle {
  width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  .progress-circle {
    width: 80px;
    height: 80px;
  }
}

以上方法提供了从基础到进阶的多种实现方式，可根据项目需求选择合适方案。SVG 方案具有最佳的性能和灵活性，而第三方库则能快速实现标准化效果。