CreateUI

Appearance

Return to top
On this page

Progress 进度条

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

直线进度条

Progress需要一个必填的属性， percentage ，该属性表示这个进度条的百分比，并且值必须在0~100范围内。

另外，你可以传入一个名为 status 的字符串属性（不需要冒号绑定），来表示这个进度条的状态。

50%
100%
<template>
  <div>
    <c-progress :percentage="50"></c-progress>
    <c-progress :percentage="100"></c-progress>
    <c-progress :percentage="100" status="success"></c-progress>
    <c-progress :percentage="100" status="danger"></c-progress>
    <c-progress :percentage="100" status="warning"></c-progress>
  </div>
</template>

设置进度条高度并且让百分比显示在进度条内

你可以传入一个 number 属性 barHeight 来控制进度条的高度，并且可以通过 text-inside 属性来控制进度条是否在内，该属性的值为 Boolean 类型。

70%
100%
60%
40%
<template>
  <div>
    <c-progress
      :barHeight="24"
      :percentage="70"
      :text-inside="true"
    ></c-progress>
    <c-progress
      :barHeight="24"
      :percentage="100"
      :text-inside="true"
      status="success"
    ></c-progress>
    <c-progress
      :barHeight="24"
      :percentage="60"
      :text-inside="true"
      status="warning"
    ></c-progress>
    <c-progress
      :barHeight="24"
      :percentage="40"
      :text-inside="true"
      status="danger"
    ></c-progress>
  </div>
</template>

Progress API

Progress属性

属性名说明类型可选值默认值
percentage百分比，必填number0-1000
type进度条类型string'line' | 'circle''line'
barHeight进度条的高度number——10
text-inside文字是否显示在进度条内boolean——false
status进度条当前状态string'success' | 'danger' | 'warning'——