动画 (3).gif
超人鸭最近使用canvas撸了一个高度可配置的进度条组件，已上传至npm，主要特点是各种颜色的搭配，包括线条粗细、带不带进度点等等各种配置。叫vue-color-progress(这是第二个版本，之前只有环形，现在更新了正方形进度条)
vue-color-progress npm地址
看看怎么使用吧:
# 安装
npm install vue-color-progress
# 组件内引入
import ColorProgress from 'vue-color-progress'
# 使用,progress是进度，代表百分之多少，为必填，默认为环形
<color-progress :progress="50"></color-progress>
# 使用(正方形)
<color-progress :progress="50" type="square"></color-progress>
默认效果:
image.png
因为是高度可配置，所以可接收的参数会非常多，我整理了一份配置表：
配置项
| 名称 | 解释 | 是否必填 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|---|
| progress | 进度 | 是 | Number | ||
| type | 进度条类型 | 否 | String | 'circle' | 'circle'、'square' |
| circleRadius | 圆环半径(选择circle类型时候) | 否 | Number | 60 | |
| sideLength | 正方形边长(选择square类型时候) | 否 | Number | 150 | |
| baseWidth | 底图线条宽度 | 否 | Number | 10 | |
| baseColor | 底图线条颜色 | 否 | String | '#e5e9f2' | |
| lineWidth | 进度条的宽度 | 否 | Number | 10 | |
| fillet | 进度条是否开启圆角 | 否 | Boolean | true | |
| withGradient | 进度条是否开启渐变色 | 否 | Boolean | true | |
| graColor | 渐变颜色组 | 否 | Array<String> | ['#13CDE3', '#3B77E3'] | |
| lineColor | 不渐变时进度条的颜色 | 否 | String | '#42cccc' | |
| isShowPoint | 是否开启进度点 | 否 | Boolean | false | |
| pointRadius | 进度点半径 | 否 | Number | 8 | |
| pointColor | 进度点颜色 | 否 | String | '#3B77E3' | |
| label | 中心文字 | 否 | String | ||
| fontSize | 文字大小 | 否 | Number | 16 | |
| fontColor | 文字颜色 | 否 | String | '#42cccc' | |
| fontWeight | 文字粗细 | 否 | Number | 400 | 100、200、300...900 |
| rate | 进度条速度 | 否 | String | 'normal' | 'fast'、'normal'、'slow'、'snail' |
接下来我照着这个配置表随便撸几个组件看看效果吧
image.png
<color-progress :progress="70"
baseColor="#EFE411"
:graColor="['#EF116D','#EF1118','#B411EF']"
:lineWidth="12"
:isShowPoint="true"
:pointRadius="10"
pointColor="#EF4511"
>
</color-progress>
效果:
动画 (4).gif
<color-progress :circleRadius="90"
:circleWidth="8"
label="90%"
:lineWidth="14"
:progress="90"
:fontWeight="400"
:pointRadius="10"
:isShowPoint="true">
</color-progress>
效果:
动画 (2).gif
<color-progress :progress="90"
label="color-progress"
:circleRadius="90"
:circleWidth="8"
:lineWidth="14"
:graColor="['#D51629','#D516BF','#8012D5']"
rate="snail"
>
</color-progress>
效果:
动画 (3).gif
<color-progress style="margin-left:50px;" :progress="75"
label="color-progress"
:circleRadius="90"
:circleWidth="8"
:lineWidth="14"
:graColor="['#0B24E6','#D51629','#D516BF','#8012D5']"
type="square"
>
</color-progress>
效果:
动画 (5).gif
