本篇内容主要讲解“在vue2中怎么利用svg开发一个环形进度条组件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“在vue2中怎么利用svg开发一个环形进度条组件”吧!
普通的矩形进度条我们通过div+css很容易就可以实现,而环形的就有点麻烦,当然他也可以用div+css通过背景属性或者clip属性配合css3变量做障眼法去实现,但是过于复杂而且兼容和控制起来都比较麻烦,所以,达到最佳效果我们还是去使用svg实现吧。
开发自己组件好处就是,里面的大小,颜色,粗细,动画等等都可以任意扩展,准备好了么,马上要开始啦~
<script> export default { name: "CircleProgress", data() { return { now: 0 }; }, props: { // 进度值 value: { type: [String, Number], default: 0 }, // 尺寸 size: { type: [String, Number], default: 120 }, // 边框粗细 strokeWidth:{ type: [String, Number], default: 10 }, // 进度条颜色 color: { type: String, default: "rgba(153,202,251,1)" }, // 动画执行时间 duration:{ type: [String, Number], default: 1000 } }, computed: { percentage() { return this.value; }, countDown() { return this.now; }, // 圆心x轴坐标 cx() { return this.size / 2; }, // 圆心y轴坐标 cy() { return this.size / 2; }, // 半径 radius() { return (this.size - this.strokeWidth) / 2; }, // 圆周长 circumference() { return 2 * Math.PI * this.radius; }, // 进度长度 progress() { return (1 - this.now / 100) * this.circumference; } }, }; </script>
相信大家通过上面的注释怎么开发就会猜的八九不十,我们的这个组件可以设置大小,边框粗细,进度条颜色,和后面要多久从0呈现出进度值的动画时长。至于计算属性,会在后面绘制svg的时候,根据注释一一对应不难看出来目的。
<template> <div class="circle-main"> <div class="circle-main-box" :style="[{ 'width': size+'px','height': size+'px'}]"> <svg :width="size" :height="size" class="circle"> <circle :r="radius" :cx="cx" :cy="cy" fill="transparent" stroke="#EEEEEE" :stroke-width="strokeWidth" /> <circle :r="radius" :cx="cx" :cy="cy" fill="transparent" :stroke="color" :stroke-width="strokeWidth" stroke-linecap="round" :stroke-dasharray="circumference" :stroke-dashoffset="progress" /> </svg> <span class="count-num" :style="[{ 'font-size': size*.3+'px'}]">{{countDown}}%</span> </div> </div> </template>
其实这个很简单就是用svg写两个圆环,第一作为灰色底圆,第二个就是我们的进度条了,设置好大小圆心半径边框色,而且我们要把填充色变为同名,都写完了剩下两项stroke-dasharray和stroke-dashoffset,相信大家都会猜的到了,svg进度条变化核心就是这两个属性,刚刚计算属性也算出来了,分别就是圆环的周长和当前进度的长度。我们利用当前进度值来计算百分比占当前的长度,实现环形进度条的变化,就是这么简单。
然后我们还要写一丢丢css,而且是必须写,因为svg圆环不是从我们认为的0度开始,而是偏移了90度。
所以我们要用css再给他转过90度来!
.circle { transform: rotate(-90deg); }
然后我们顺便写好文字和主框的一些样式。
.circle-main-box { position: relative; display: block; margin: 0 auto; } .count-num { width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; align-items: center; justify-content: center; display: flex; font-family: fantasy; font-size: 30px; color: #333; user-select: none; }
这样我们就得到了一个静态的环形进度条了。
<script> export default { name: "CircleProgress", // ... mounted() { this.run(); }, methods: { run() { if (this.value == 0) return; let t = this.duration / this.value this.timer = setInterval(() => { if (this.now >= this.value) { return clearInterval(this.timer); } this.now++; }, t); } } };
我们会通过当前动画执行时间与当前的值计算出每次数量+1执行的时间,然后通过 setInterval去执行,直至达到进度值。最后,我们就要开始使用这个组件啦~~
<div id="app"> <CircleProgress :value="60" :size="150" :color="'#d36'" :duration="3000" /> </div>
到此,相信大家对“在vue2中怎么利用svg开发一个环形进度条组件”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。