ProgressCircle 环形进度条

介绍

用于展示数据的进度百分比。

基础用法

通过 value 属性来设置进度条百分比。

<vd-progress-circle value="50" />

进度条宽度

通过 width 属性来设置进度条宽度。

<vd-progress-circle value="50" width="8" />

进度条尺寸

通过 size 属性来设置进度条尺寸。

<vd-progress-circle value="50" size="50" />

进度条起始角度

通过 start-angle 属性来设置进度条起始角度。

<vd-progress-circle value="50" size="50" start-angle="90" />

进度条颜色

通过 color 属性来设置进度条颜色。

<vd-progress-circle value="50" color="#ee0a24" />
<vd-progress-circle value="50" color="#ff976a" />
<vd-progress-circle value="50" color="#07c160" />

进度条状态

通过 status 属性来设置进度条状态，可选值为 success warning error。

<vd-progress-circle value="50" status="success" />
<vd-progress-circle value="50" status="warning" />
<vd-progress-circle value="50" status="error" />

API

Props

参数	说明	类型	默认值
value	百分比进度值	string | number	0
width	进度条宽度	string | number	5
size	进度条尺寸	string | number	-
color	进度条颜色	string	-
track-color	进度条轨道颜色	string	-
status	进度条状态，可选值为 success warning error	ProgressCircleStatus	-
duration	动画时长，单位 ms	string | number	600
easing	动画过渡方法	EasingTimeline	'ease'

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent

Slots

名称	说明
text	中间进度文本
status	中间状态图标