Progress 进度条

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

直线进度条

进度条内显示百分比标识

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

自定义进度条的颜色

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

环形进度条

仪表盘形进度条

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

自定义内容

动画进度条

条纹进度条

API

属性

属性名说明类型默认值
percentage requiredpercentagenumber0
type进度条类型enumline
stroke-width进度条的宽度number6
text-inside进度条显示文字内置在进度条内(仅 type 为 'line' 时可用)booleanfalse
status进度条当前状态enum
indeterminate是否为动画进度条booleanfalse
duration控制动画进度条速度和条纹进度条流动速度number3
color进度条背景色 进度条背景色 (会覆盖 status 状态颜色)string / function / Array''
width环形进度条画布宽度(只在 type 为 circle 或 dashboard 时可用)number126
show-text是否显示进度条文字内容booleantrue
stroke-linecapcircle/dashboard 类型路径两端的形状enumround
format指定进度条文字内容Function
striped 2.3.4在进度条上增加条纹booleanfalse
striped-flow 2.3.4让进度条上的条纹流动起来booleanfalse

Slots

名称说明类型
default自定义内容object

源代码

组件文档

贡献者