Progress 进度条

介绍

用于展示操作的当前进度。

基础用法

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

<vd-progress value="50" />

进度条高度

通过 height 属性来设置进度条高度。

<vd-progress value="50" height="8" />

进度条类型

通过 type 属性来设置进度条类型，可选值为 default、pivot、inner。

<vd-progress value="50" />
<vd-progress value="50" type="pivot" />
<vd-progress value="50" type="inner" />

进度条颜色

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

<vd-progress value="20" color="#ee0a24" type="pivot" />
<vd-progress value="50" color="#ff976a" type="pivot" />
<vd-progress value="70" color="#07c160" type="pivot" />

API

Props

参数	说明	类型	默认值
value	百分比进度值	string | number	-
type	类型，可选值为 default pivot inner	ProgressType	default
height	进度条高度	string | number	-
color	进度条颜色	string	-
label-show	是否展示标签	boolean	true

代替原始 Props

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

Events

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

Slots

名称	说明
label	进度条标签