当前位置：首页 > news >正文

vue svg实现一个环形进度条组件

news 2025/7/18 8:14:14

svg实现一个环形进度条

设计初衷：本来想直接使用element的进度条组件的，但是好多属性都没有办法控制。
UI设计的图如下，需要控制未完成和已完成的颜色，端点的形状改为普通的butt
所以使用svg实现了一个环形进度条组件

element组件
在这里插入图片描述

设计图实现效果

在这里插入图片描述
可以交互的svg 环形进度条组件

<template><div class="circular-progress-container"><svg:width="size":height="size"viewBox="0 0 100 100"class="progress-svg"><!-- 背景圆（未完成部分） --><circleclass="progress-background"cx="50"cy="50":r="radius"fill="none":stroke="backgroundColor":stroke-width="strokeWidth"/><!-- 前景圆（已完成部分） --><circleclass="progress-foreground"cx="50"cy="50":r="radius"fill="none":stroke="progressColor":stroke-width="strokeWidth":stroke-dasharray="circumference":stroke-dashoffset="dashOffset"stroke-linecap="butt"transform="rotate(-90 50 50)"/><!-- 中心文本 --><!-- <textclass="progress-text"x="50"y="50"text-anchor="middle"dominant-baseline="middle">{{ Math.round(progress) }}%</text> --></svg><!-- 控制滑块 --><!-- <div class="progress-controls"><inputtype="range"min="0"max="100"step="1"v-model.number="progress"class="progress-slider"@input="onProgressChange"/></div> --></div>
</template><script setup>
import { ref, computed } from 'vue';const props = defineProps({size: {type: Number,default: 48},strokeWidth: {type: Number,default: 12},backgroundColor: {type: String,default: '#D5DDEB' // 灰色背景},progressColor: {type: String,default: '#367AFB' // 蓝色进度},initialProgress: {type: Number,default: 0,validator: value => value >= 0 && value <= 100}
});const emit = defineEmits(['progress-change']);const progress = ref(props.initialProgress);const radius = computed(() => 50 - props.strokeWidth / 2);
const circumference = computed(() => 2 * Math.PI * radius.value);
const dashOffset = computed(() => circumference.value * (1 - progress.value / 100));const onProgressChange = () => {emit('progress-change', progress.value);
};
</script><style scoped>
.circular-progress-container {display: flex;flex-direction: column;align-items: center;gap: 20px;width: fit-content;
}.progress-svg {display: block;
}.progress-background {transition: stroke 0.3s ease;
}.progress-foreground {transition: stroke-dashoffset 0.5s ease, stroke 0.3s ease;
}.progress-text {font-size: 20px;font-weight: bold;fill: #333;user-select: none;
}.progress-controls {width: 80%;max-width: 300px;
}.progress-slider {width: 100%;cursor: pointer;
}.progress-slider::-webkit-slider-thumb {-webkit-appearance: none;width: 18px;height: 18px;border-radius: 50%;background: v-bind('props.progressColor');cursor: pointer;
}.progress-slider::-moz-range-thumb {width: 18px;height: 18px;border-radius: 50%;background: v-bind('props.progressColor');cursor: pointer;
}
</style>

`radius` 计算半径

const radius = computed(() => 50 - props.strokeWidth / 2);

因为设置了viewBox="0 0 100 100"，所以是绘制在一个100*100的画布上

`stroke-dashoffset`属性解释

stroke-dashoffset 控制虚线模式的起始位置偏移量。结合 stroke-dasharray，我们可以实现进度条效果：

stroke-dasharray：定义虚线的模式（实线长度, 间隔长度）
stroke-dashoffset：定义虚线模式的起始偏移量

对于环形进度条：

设置 stroke-dasharray 为圆的周长（表示100%进度）
通过 stroke-dashoffset 控制显示比例

const radius = 50 - strokeWidth / 2; // 半径
const circumference = 2 * Math.PI * radius; // 圆周长// 计算偏移量（0%进度时偏移量=周长，100%进度时偏移量=0）
const dashOffset = circumference * (1 - progress / 100);

初始状态下，我们希望进度为0，也就是没有显示进度，那么我们应该将整个长划偏移出去，即偏移量等于周长（dashoffset = circumference）。
随着进度增加，我们希望显示的部分越来越多，那么偏移量应该逐渐减少。当进度为100%时，偏移量为0（即没有偏移，整个圆环显示出来）。
因此，偏移量的计算公式为：
dashoffset = circumference * (1 - progress / 100)