实现一个圆形进度条（vue）

实现方式：首先是用svg画两个圆，同圆心同半径的两个圆，然后把颜色都设置成透明，利用圆的边框来实现。给两个圆设置相同的边框宽度，并且设置颜色（设置一个透明，一个有颜色）；然后创建stroke-dasharray实线/虚线线条，长度（值）为 2πr，即圆的周长；将stroke-dashoffset设置为动态属性，这个属性是“定义实线/虚线的起点距离路径的起点的距离”，利用这个属性来当做进度条，从而控制进度。

<template><div id="pro"><button style="display:block;margin:0 auto" :disabled="disabled" @click="begin">开始</button><!-- 内置图形：rect(矩形)    circle(圆)  ellipse(椭圆)   line(直线)   polyline(折线)  polygon(多边形)  path(路径)--><!-- 内置样式fill(填充颜色)   fill-opacity(填充透明度)stroke(边框颜色)   stroke-width(边框宽度)   stroke-opacity(边框透明度)   stroke-dasharray(定义实线虚线的长度)stroke-dashoffset(定义实线/虚线的起点距离 路径 的起点的距离)transform(变换)filter(滤镜)(url[#滤镜id)]--><svg style="width:300px;height:300px"><!-- r代表圆的半径；cx、cy代表圆心坐标；fill代表填充颜色，这里是透明 --><circle r="50" cx="100" cy="100" fill="transparent" class="bg" /><circler="50"cx="100"cy="100"fill="transparent"class="inner"stroke-dasharray="314":stroke-dashoffset="progress"/><!-- 上面 stroke-dasharray="314"  314是圆的周长，2πr = 2 x 3.14 x 50 --><!-- 定义了实线长度为314，stroke-dashoffset可以通过动态绑定来控制 --></svg></div>
</template>

<script>
export default {name: "Progress",data() {return {progress: 0,disabled: false, // 按钮是否禁用timer: null,};},methods: {begin() {this.disabled = true;// 定时器的回调函数用箭头函数来写，这样里面的this才会指向vue组件// 如果使用普通函数写法，那么this会指向 windowthis.timer = setInterval(() => {if (this.progress >= 314) {this.progress = 0;this.disabled = false;clearInterval(this.timer);} else {this.progress++;}}, 20);},},
};
</script>

body {margin: 0;padding: 0;
}#pro { /* 容器 */width: 300px;height: 300px;margin: 0 auto;
}.bg {stroke-width: 8px; /* 设置边框宽度 */stroke: red; /* 设置边框颜色 */
}.inner {stroke-width: 8px; /* 设置边框宽度 */stroke: blue; /* 设置边框颜色 */
}