ETU组件库

Appearance

Return to top
On this page

Progress 进度条

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

直线进度条

Progress 组件设置 percentage 属性即可，表示进度条对应的百分比。 该属性必填，并且必须在 0-100 的范围内。

50%
50%
50%
50%
<template>
  <div style="display: flex; flex-direction: column; gap: 10px">
    <etu-progress :percentage="50"></etu-progress>
    <etu-progress :percentage="50" status="success"></etu-progress>
    <etu-progress :percentage="50" status="danger"></etu-progress>
    <etu-progress :percentage="50" status="warning"></etu-progress>
  </div>
</template>

<template>
  <div style="display: flex; flex-direction: column; gap: 10px">
    <etu-progress :percentage="50"></etu-progress>
    <etu-progress :percentage="50" status="success"></etu-progress>
    <etu-progress :percentage="50" status="danger"></etu-progress>
    <etu-progress :percentage="50" status="warning"></etu-progress>
  </div>
</template>

进度条内显示百分比标识

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

20%
50%
70%
100%
<template>
  <div style="display: flex; flex-direction: column; gap: 10px">
    <etu-progress :percentage="20" text-inside stroke-width="20"></etu-progress>
    <etu-progress
      :percentage="50"
      text-inside
      stroke-width="20"
      status="success"
    ></etu-progress>
    <etu-progress
      :percentage="70"
      text-inside
      stroke-width="20"
      status="danger"
    ></etu-progress>
    <etu-progress
      :percentage="100"
      text-inside
      stroke-width="20"
      status="warning"
    ></etu-progress>
  </div>
</template>

<template>
  <div style="display: flex; flex-direction: column; gap: 10px">
    <etu-progress :percentage="20" text-inside stroke-width="20"></etu-progress>
    <etu-progress
      :percentage="50"
      text-inside
      stroke-width="20"
      status="success"
    ></etu-progress>
    <etu-progress
      :percentage="70"
      text-inside
      stroke-width="20"
      status="danger"
    ></etu-progress>
    <etu-progress
      :percentage="100"
      text-inside
      stroke-width="20"
      status="warning"
    ></etu-progress>
  </div>
</template>

Progress 属性

属性名说明类型可选值默认值
percentage百分比，必填number(0-100)0
stroke-width进度条的宽度number—6
status进度条当前状态stringsuccess/exception/warning-
show-text是否显示进度条文字内容boolean-true

Progress 插槽

名称说明
—自定义默认内容