一款高度可配置的vue进度条组件(持续更新)

动画 (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

是不是有点炫酷呢，下次超人鸭会把实现方法和上传到npm的过程分享出来，欢迎大家指教哦。

作者微信:Promise_fulfilled