×
028-86922220

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

在vue2中怎么利用svg开发一个环形进度条组件

本篇内容主要讲解“在vue2中怎么利用svg开发一个环形进度条组件”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“在vue2中怎么利用svg开发一个环形进度条组件”吧!

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：主机域名、虚拟空间、营销软件、网站建设、龙凤网站维护、网站推广。

在vue2中怎么利用svg开发一个环形进度条组件

普通的矩形进度条我们通过div+css很容易就可以实现，而环形的就有点麻烦，当然他也可以用div+css通过背景属性或者clip属性配合css3变量做障眼法去实现，但是过于复杂而且兼容和控制起来都比较麻烦，所以，达到最佳效果我们还是去使用svg实现吧。

开发自己组件好处就是，里面的大小，颜色，粗细，动画等等都可以任意扩展，准备好了么，马上要开始啦~

正文

1.传参与计算

相信大家通过上面的注释怎么开发就会猜的八九不十，我们的这个组件可以设置大小，边框粗细，进度条颜色，和后面要多久从0呈现出进度值的动画时长。至于计算属性，会在后面绘制svg的时候，根据注释一一对应不难看出来目的。

2.结构与样式

其实这个很简单就是用svg写两个圆环，第一作为灰色底圆，第二个就是我们的进度条了，设置好大小圆心半径边框色，而且我们要把填充色变为同名，都写完了剩下两项stroke-dasharray和stroke-dashoffset，相信大家都会猜的到了，svg进度条变化核心就是这两个属性，刚刚计算属性也算出来了，分别就是圆环的周长和当前进度的长度。我们利用当前进度值来计算百分比占当前的长度，实现环形进度条的变化，就是这么简单。

然后我们还要写一丢丢css，而且是必须写，因为svg圆环不是从我们认为的0度开始，而是偏移了90度。

在vue2中怎么利用svg开发一个环形进度条组件

所以我们要用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;
}

在vue2中怎么利用svg开发一个环形进度条组件

这样我们就得到了一个静态的环形进度条了。

3.动画与使用











3.0234s