vue圆形进度条,vue组件
vue-circle-progress
vue圆形进度条组件，自由可定制
/src/App.vue是使用圆形进度条组件的代码实例
组件源代码为circle-progress.vue，拷贝该文件，直接使用即可
| 参数名 | 值类型 | 是否必填 | 参数作用 | 默认值 |
|---|---|---|---|---|
| id | String | 选填 | 组件的id，多次定义设置不同的值 | 1 |
| width | Number | 必填 | 设置圆整体的大小，单位为px | 无 |
| radius | Number | 必填 | 设置进度条宽度，单位为px | 无 |
| progress | Number | 必填 | 设置进度百分比 | 无 |
| barColor | String | 必填 | 设置进度条颜色 | 无 |
| backgroundColor | String | 必填 | 设置进度条背景颜色 | 无 |
| delay | Number | 选填 | 延迟多久执行，单位为ms | 20 |
| duration | Number | 选填 | 动画整体时长，单位为ms | 1000 |
| timeFunction | String | 选填 | 动画缓动算法 | cubic-bezier(0.99, 0.01, 0.22, 0.94) |
| isRound | Boolean | 选填 | 进度条是否使用圆滑结束 | true |
| isAnimation | Boolean | 选填 | 是否以动画的方式呈现 | true |
<circle-progress
:id="1"
:width="200"
:radius="20"
:progress="70"
:delay="200"
:duration="1000"
:barColor="'#F2AE57'"
:backgroundColor="'#FFE8CC'"
:isRound="true"
:isAnimation="true"
:timeFunction="'cubic-bezier(0.99, 0.01, 0.22, 0.94)'"
>
组件原理及详细介绍，请移步这个文章
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
