Progress 进度条

进度条组件,用于展示任务进度

进度条组件,用于展示任务进度

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-progress class="demo-progress-0" :percentage="0" />
  <re-progress class="demo-progress-30" :percentage="30" />
  <re-progress class="demo-progress-60" :percentage="60" />
  <re-progress class="demo-progress-100" :percentage="100" />

<!-- 主题色 -->
  <re-progress class="demo-progress-primary" :percentage="50" theme="primary" />
  <re-progress class="demo-progress-success" :percentage="50" theme="success" />
  <re-progress class="demo-progress-warning" :percentage="50" theme="warning" />
  <re-progress class="demo-progress-danger" :percentage="50" theme="danger" />

<!-- 状态 -->
  <re-progress class="demo-progress-active" :percentage="50" status="active" />
  <re-progress class="demo-progress-success-status" :percentage="100" status="success" />
  <re-progress class="demo-progress-error" :percentage="50" status="error" />

<!-- 显示标签 -->
  <re-progress class="demo-progress-label" :percentage="45" :showLabel="true" />
  <re-progress class="demo-progress-no-label" :percentage="45" :showLabel="false" />

<!-- 线条宽度 -->
  <re-progress class="demo-progress-thin" :percentage="50" strokeWidth="4px" />
  <re-progress class="demo-progress-normal" :percentage="50" strokeWidth="6px" />
  <re-progress class="demo-progress-thick" :percentage="50" strokeWidth="12px" />

<!-- 自定义样式 -->
  <re-progress class="demo-progress-custom-style" :percentage="50" customStyle="margin-top: 10px;" />

<!-- 不同进度 -->
  <re-progress class="demo-progress-10" :percentage="10" :showLabel="true" />
  <re-progress class="demo-progress-25" :percentage="25" :showLabel="true" />
  <re-progress class="demo-progress-75" :percentage="75" :showLabel="true" />
  <re-progress class="demo-progress-90" :percentage="90" :showLabel="true" />

<!-- 完整属性 -->
  <re-progress class="demo-progress-all" :percentage="80" theme="primary" status="active" :showLabel="true" strokeWidth="8px" />

引入

推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-progress />。

API

Progress Props

名称类型默认值描述必传
percentagenumber0进度百分比 0-100N
themestring"default"进度条主题N
statusstring"default"进度条状态N
strokeWidthstring"6px"进度条宽度N
colorstring""进度条颜色N
trackColorstring""轨道颜色N
labelbooleanfalse是否显示标签N
showLabelbooleantrue是否显示百分比标签N
customStylestring""自定义样式N

Progress Events

名称参数描述
---

Progress Slots

名称描述
--