Progress 进度条​

Progress 进度条 ​用于展示操作进度，告知用户当前状态和预期。

直线进度条 ​Progress 组件设置 percentage 属性即可，表示进度条对应的百分比。 该属性必填，并且必须在 0-100 的范围内。 你可以通过设置 format 来自定义文字显示的格式。

50%Fullvue

隐藏源代码进度条内显示百分比标识 ​百分比不占用额外空间，适用于文件上传等场景。

Progress 组件可通过 stroke-width 属性更改进度条的高度，并可通过 text-inside 属性来改变进度条内部的文字。

70%100%80%50%vue

隐藏源代码自定义进度条的颜色 ​可以通过 color 属性来设置进度条的颜色。 该属性可以接受十六进制颜色值，函数和数组。

20%20%20%20%vue

隐藏源代码环形进度条 ​Progress 组件可通过 type 属性来指定使用环形进度条，在环形进度条中，还可以通过 width 属性来设置其大小。

0%25%vue

隐藏源代码仪表盘形进度条 ​您也可以指定 type 属性到 dashboard 使用控制面板进度栏。

10%0%vue

隐藏源代码自定义内容 ​通过默认插槽添加自定义内容。

ContentContent80%Progressingvue

隐藏源代码动画进度条 ​使用 indeterminate 属性来设置不确定的进度， duration 来控制动画持续时间。

50%Fullvue

隐藏源代码条纹进度条 ​通过设置 striped 属性获取条纹进度条。 也可以使用 striped-flow 属性来使条纹流动起来。 使用duration 属性来控制条纹流动的速度。

50%vue

隐藏源代码API ​属性 ​属性名说明类型默认值percentage requiredpercentagenumber0type进度条类型enumlinestroke-width进度条的宽度number6text-inside进度条显示文字内置在进度条内（仅 type 为 'line' 时可用）booleanfalsestatus进度条当前状态enum—indeterminate是否为动画进度条booleanfalseduration控制动画进度条速度和条纹进度条流动速度number3color进度条背景色 （会覆盖 status 状态颜色）string / function / Array''width环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用）number126show-text是否显示进度条文字内容booleantruestroke-linecapcircle/dashboard 类型路径两端的形状enumroundformat指定进度条文字内容Function—striped 2.3.4在进度条上增加条纹booleanfalsestriped-flow 2.3.4让进度条上的条纹流动起来booleanfalseSlots ​名称说明类型default自定义内容object源代码 ​组件 • 样式 • 文档

贡献者 ​