Progress 进度条

用于展示操作进度,告知用户当前状态和预期。

直线进度条

进度条内显示百分比标识

百分比不占用额外控件,适用于文件上传等场景。

自定义进度条的颜色

可以通过 color 属性来设置进度条的颜色。 该属性可以接受十六进制颜色值,函数和数组。

环形进度条

仪表盘形进度条

您也可以指定 type 属性到 dashboard 使用控制面板进度栏。

自定义内容

动画进度条

Progress 属性

属性名说明类型可选值默认值
percentage百分比,必填number(0-100)0
type进度条类型stringline/circle/dashboardline
stroke-width进度条的宽度number6
text-inside进度条显示文字内置在进度条内(仅 type 为 'line' 时可用)booleanfalse
status进度条当前状态stringsuccess/exception/warning
indeterminate是否为动画进度条boolean-false
duration控制动画进度条速度number-3
color进度条背景色 进度条背景色 (会覆盖 status 状态颜色)string/function/array''
width环形进度条画布宽度(只在 type 为 circle 或 dashboard 时可用)number126
show-text是否显示进度条文字内容booleantrue
stroke-linecapcircle/dashboard 类型路径两端的形状stringbutt/round/squareround
format指定进度条文字内容function(percentage)

Progress 插槽

名称说明
default自定义内容,参数为 { percentage }

源代码

组件文档

贡献者