Progress 进度条

概述

展示操作或任务的当前进度,比如上传文件。

注意:非 template/render 模式下,需使用 i-progress

代码示例

Progress 进度条 - 图1

基本用法

处在不同状态下的进度条,当 percent 为 100 时,自动将状态置为 success。

  1. <template>
  2. <Progress :percent="25" />
  3. <Progress :percent="45" status="active" />
  4. <Progress :percent="65" status="wrong" />
  5. <Progress :percent="100" />
  6. <Progress :percent="25" hide-info />
  7. </template>
  8. <script>
  9. export default {
  10. }
  11. </script>

Progress 进度条 - 图2

百分比内显

4.0.0 设置属性 text-inside 可以将百分比显示在进度条内部。

需要通过属性 stroke-width 设置一个足够的高度。

  1. <template>
  2. <Progress :percent="25" :stroke-width="20" text-inside />
  3. <Progress :percent="45" :stroke-width="20" status="active" text-inside />
  4. <Progress :percent="65" :stroke-width="20" status="wrong" text-inside />
  5. <Progress :percent="100" :stroke-width="20" text-inside />
  6. </template>
  7. <script>
  8. export default {
  9. }
  10. </script>

Progress 进度条 - 图3

垂直方向

设置属性 vertical 将以垂直方向显示。

  1. <template>
  2. <div style="height: 100px;">
  3. <Progress vertical :percent="25" />
  4. <Progress vertical :percent="45" status="active" />
  5. <Progress vertical :percent="65" status="wrong" />
  6. <Progress vertical :percent="100" />
  7. <Progress vertical :percent="25" hide-info />
  8. </div>
  9. </template>
  10. <script>
  11. export default {
  12. }
  13. </script>

Progress 进度条 - 图4

配合外部组件使用

通过数据的联动和逻辑控制,实现动态效果。

  1. <template>
  2. <Progress :percent="percent" />
  3. <ButtonGroup size="large">
  4. <Button icon="ios-add" @click="add"></Button>
  5. <Button icon="ios-remove" @click="minus"></Button>
  6. </ButtonGroup>
  7. </template>
  8. <script>
  9. export default {
  10. data () {
  11. return {
  12. percent: 0
  13. }
  14. },
  15. methods: {
  16. add () {
  17. if (this.percent >= 100) {
  18. return false;
  19. }
  20. this.percent += 10;
  21. },
  22. minus () {
  23. if (this.percent <= 0) {
  24. return false;
  25. }
  26. this.percent -= 10;
  27. }
  28. }
  29. }
  30. </script>

Progress 进度条 - 图5

自定义更多样式

通过自定义slot和属性stroke-width改变进度条效果。

  1. <template>
  2. <Progress :percent="25" :stroke-width="5" />
  3. <Progress :percent="100">
  4. <Icon type="checkmark-circled"></Icon>
  5. <span>成功</span>
  6. </Progress>
  7. </template>
  8. <script>
  9. export default {
  10. }
  11. </script>

Progress 进度条 - 图6

渐变色

4.0.0 设置属性 stroke-color 为数组时,可以显示为渐变色。

数组只能设置为两项。

<template>
    <Progress :percent="90" :stroke-color="['#108ee9', '#87d068']" />
</template>
<script>
    export default {

    }
</script>

Progress 进度条 - 图7

分段进度条

标准的进度条。

<template>
    <Tooltip content="3 done / 3 in progress / 4 to do" style="width: 100%">
        <Progress :percent="60" :success-percent="30" />
    </Tooltip>
</template>
<script>
    export default {

    }
</script>

API

Progress props

属性说明类型默认值
percent百分比Number0
status状态,可选值为normalactivewrongsuccessStringnormal
stroke-width进度条的线宽,单位 pxNumber10
stroke-color 3.3.0进度条的颜色,4.0.0 开始支持传入数组,显示为渐变色String | Array-
hide-info隐藏数值或状态图标Booleanfalse
vertical是否在垂直方向显示Booleanfalse
success-percent已完成的分段百分比Number0
text-inside 4.0.0百分比是否置于进度条内Booleanfalse

Progress slot

名称说明
自定义显示状态内容