BitBounceFE-UI

Appearance

Return to top
On this page

Progress 进度条

TIP

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

何时使用

  • 向用户展示操作进度。
  • 当需要显示一个操作完成的百分比或已完成的步骤 / 总步骤时。

基本用法

默认类型进度条

30%
30%
30%
30%
30%
30%
60%
60%
90%
90%
90%
<template>
  <div>
    <b-progress :strokeWidth="10" :percentage="30"></b-progress>
    <b-progress
      :strokeWidth="10"
      :percentage="30"
      defineBackColor="green"
    ></b-progress>
    <b-progress
      textColor="red"
      color="yellow"
      :strokeWidth="24"
      :percentage="60"
      :textInside="true"
    ></b-progress>
    <b-progress :percentage="90"></b-progress>
  </div>
</template>

环形进度条

35%
35%
70%
70%
<template>
  <div>
    <b-progress type="Circle" :strokeWidth="8" :percentage="35"></b-progress>
    <b-progress
      color="green"
      type="Circle"
      :strokeWidth="8"
      :percentage="70"
      strokeLinecap="butt"
    ></b-progress>
  </div>
</template>

仪表盘

35%
70%
<template>
  <div>
    <b-progress type="dashboard" :strokeWidth="8" :percentage="35"></b-progress>
    <b-progress
      color="green"
      type="dashboard"
      :strokeWidth="8"
      :percentage="70"
      strokeLinecap="butt"
    ></b-progress>
  </div>
</template>

其他

30%
30%
30%

30%
30%
30%
<template>
  <div>
    <b-progress :percentage="percentage"></b-progress>
    <br />
    <b-progress
      color="yellow"
      type="Circle"
      :strokeWidth="8"
      :percentage="percentage"
    ></b-progress>
    <b-progress
      color="green"
      type="dashboard"
      :strokeWidth="8"
      :percentage="percentage"
      strokeLinecap="butt"
    ></b-progress>
     <b-button type="primary" size="large" @click="increase" :plain=true>+</b-button>
     <b-button type="primary" size="large" @click="decrease" :plain=true>-</b-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      percentage: 30
    };
  },
  methods: {
    increase() {
      this.percentage += 10;
      if (this.percentage > 100) {
        this.percentage = 100;
      }
    },
    decrease() {
      this.percentage -= 10;
      if (this.percentage < 0) {
        this.percentage = 0;
      }
    }
  }
};
</script>

API

属性

属性名类型默认值说明
percentagenumber0必选，进度条的值最大为 100。
type'line' | 'dashboard'|'circle''line'可选，进度条类型。
strokeWidthnumber6可选，进度条的宽度。
textInsidebooleanfalse可选，进度条显示文字内置在进度条内（仅 type 为 line 时可用）。
colorstring'blue'可选，进度条的颜色。
widthnumber126可选，环形进度条画布宽度（只在 type 为 Circle 或 dashboard 时可用）。
showTextbooleantrue可选，是否显示进度条文字内容。
strokeLinecapstring'round'可选，circle / dashboard 类型路径两端的形状。
defineBackcolorstring'#eee'可选，进度条的背景颜色。
textColorstring'black'可选，进度条的字体颜色。