CircleProgress 环形进度条

根据百分比，显示进度.

不依赖canvas，使用CSS实现的环形进度条组件。

基本使用

<!-- 默认样式 -->
<com-circle-progress :percent="50"></com-circle-progress>

<!--自定义颜色 -->
<com-circle-progress :percent="50" bgColor="#fff4de" color="#846762"></com-circle-progress>

<!--自定义尺寸 -->
<com-circle-progress :percent="80" :size="200" :border-width="16"></com-circle-progress>

<!--不显示百分比 -->
<com-circle-progress :percent="80" :showPercent="false"></com-circle-progress>

自定义显示内容，此时showPercent将失效

<com-circle-progress :percent="percent2" :size="220" :border-width="16" color="#5bc3e2">
    <text>完成进度: {{ percent2 }}%</text>
</com-circle-progress>

API

Props

属性名	说明	类型	必填	默认值
percent	进度，范围0~100	Number	是	0
size	尺寸	Number	否	100
borderWidth	圆环边框宽度	Number	否	5
color	激活时颜色	String	否	#3bc138
bgColor	非激活时颜色	String	否	#e7e7e7
showPercent	是否显示百分数	Boolean	否	true
duration	环绕一周所花的时间(单位秒)	Number	否	1

Slot

名称	说明	默认内容
default	自定义展示内容	当前进度百分数