vue实现环形进度

Vue 环形进度条实现方法

使用 SVG 和 CSS 实现基础环形进度条

SVG 的 circle 元素可以轻松创建环形进度条。通过计算 stroke-dasharray 和 stroke-dashoffset 属性来实现进度效果。

<template>
  <div class="circular-progress">
    <svg viewBox="0 0 100 100">
      <circle
        cx="50"
        cy="50"
        r="45"
        fill="none"
        stroke="#e6e6e6"
        stroke-width="10"
      />
      <circle
        cx="50"
        cy="50"
        r="45"
        fill="none"
        stroke="#4CAF50"
        stroke-width="10"
        :stroke-dasharray="circumference"
        :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: {
    circumference() {
      return 2 * Math.PI * 45;
    },
    dashOffset() {
      return this.circumference * (1 - this.progress / 100);
    }
  }
};
</script>

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

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
}
</style>

使用第三方库 vue-circle-progress

对于更复杂的需求，可以使用专门为 Vue 设计的进度条库。

安装依赖：

npm install vue-circle-progress

使用示例：

<template>
  <circle-progress
    :percent="progress"
    :size="200"
    :border-width="15"
    :border-bg-width="15"
    fill-color="#4CAF50"
    empty-color="#e6e6e6"
  />
</template>

<script>
import CircleProgress from "vue-circle-progress";

export default {
  components: {
    CircleProgress
  },
  props: {
    progress: {
      type: Number,
      default: 0
    }
  }
};
</script>

动画效果实现

为进度条添加平滑的过渡动画，可以通过 CSS 过渡或 JavaScript 动画实现。

<template>
  <div class="circular-progress">
    <svg viewBox="0 0 100 100">
      <circle class="progress-bg" ... />
      <circle
        class="progress-bar"
        ...
        :style="{ 'stroke-dashoffset': dashOffset }"
      />
    </svg>
  </div>
</template>

<style>
.progress-bar {
  transition: stroke-dashoffset 0.5s ease-in-out;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
</style>

自定义环形进度条

通过 props 允许自定义颜色、大小等属性，使组件更灵活。

<template>
  <div
    class="circular-progress"
    :style="{ width: size + 'px', height: size + 'px' }"
  >
    <svg viewBox="0 0 100 100">
      <circle ... :stroke="backgroundColor" />
      <circle ... :stroke="progressColor" />
    </svg>
  </div>
</template>

<script>
export default {
  props: {
    size: {
      type: Number,
      default: 100
    },
    backgroundColor: {
      type: String,
      default: '#e6e6e6'
    },
    progressColor: {
      type: String,
      default: '#4CAF50'
    }
  }
};
</script>

这些方法提供了从简单到复杂的环形进度条实现方案，可以根据项目需求选择合适的方案。SVG 方案提供了最大的灵活性，而第三方库则可以快速实现标准化的进度条效果。