progress 进度条

可交互的进度条

代码演示

<r-progress type="drag" ></r-progress>

属性

总进度total

设置进度条总进度，允许百分比和数字。

<r-progress percent="30" total="1000"></r-progress>
<r-progress percent="70" total="100"></r-progress>
<r-progress percent="10%" total="100%"></r-progress>

当前进度percent

设置进度条的当前进度，可以设置百分比和数字，percent不能超过total。如果不设置total，默认total为100%也就是1。

<r-progress type="primary" percent="30%"></r-progress>
<r-progress type="primary" percent="40%"></r-progress>
<r-progress type="primary" percent="100%"></r-progress>

进度条的点dot

默认展示，设置成false可隐藏

<r-progress type="drag" percent="30%" dot="false"></r-progress>
<r-progress type="primary" percent="40%" dot="true"></r-progress>
<r-progress type="primary" percent="40%"></r-progress>

类型type

• primary: 默认的进度条，不设置type属性是默认
• drag: 可拖动，可点击的进度条（拖动需要设置dot为true）

<r-progress type="drag" percent="30%"></r-progress> <r-progress type="primary" percent="40%"></r-progress>

方法

change

当percent和total属性发生变化时，触发change事件。

属性	说明	类型
value	当前进度	string｜number
percent	当前进度	string｜number
total	总进度	string｜number