周末好，今天给大家带来一款接地气的环形进度条组件vue-awesome-progress。近日被设计小姐姐要求实现这么一个环形进度条效果，大体由四部分组成，分别是底色圆环，进度弧，环内文字，进度圆点。设计稿截图如下：

我的第一反应还是找现成的组件，市面上很多组件都实现了前3点，独独没找到能画进度圆点的组件，不然稍加定制也能复用。既然没有现成的组件，只有自己用vue + canvas撸一个了。

效果图

先放个效果图，然后再说下具体实现过程，各位看官且听我慢慢道来。

安装与使用

源码地址，欢迎star和提issue。

安装

npm install --save vue-awesome-progress

使用

全局注册

import Vue from 'vue' import VueAwesomeProgress from "vue-awesome-progress" Vue.use(VueAwesomeProgress)

局部使用

import VueAwesomeProgress from "vue-awesome-progress"  export default {     components: {         VueAwesomeProgress     },     // 其他代码 }

webpack配置

由于当前版本发布时，未进行babel编译，因此使用时需要自行将vue-awesome-progress纳入babel-loader的解析范围。示例如下：

// resolve函数是连接路径的，方法体是path.join(__dirname, "..", dir) {   test: /\.js$/,   loader: "babel-loader",   include: [     resolve("src"),     resolve("node_modules/vue-awesome-progress")   ] }

静态展示

任何事都不是一蹴而就的，我们首先来实现一个静态的效果，然后再实现动画效果，甚至是复杂的控制逻辑。

确定画布大小

第一步是确定画布大小。从设计稿我们可以直观地看到，整个环形进度条的最外围是由进度圆点确定的，而进度圆点的圆心在圆环圆周上。

因此我们得出伪代码如下：

// canvasSize: canvas宽度/高度 // outerRadius: 外围半径 // pointRadius: 圆点半径 // pointRadius: 圆环半径 canvasSize = 2 * outerRadius = 2 * (pointRadius + circleRadius)

据此我们可以定义如下组件属性：

props: {   circleRadius: {     type: Number,     default: 40   },   pointRadius: {     type: