Progress 进度条

一、概述

定义

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

使用场景

• 当需要展现上传的进度时

• 上传、下载过程中由于需要较长时间的等待，需要一个进度表示当前情况

类型

• 线型进度条

• 圆型进度条

二、线型进度条

线型进度展示。

交互说明

1.展示在显示进度对象附近

2.进度数字从 0%开始，100%为结束

<template>
  <se-progress percent="0" show-info />
  <se-progress percent="70" show-info active-color="#fe9500" />
  <se-progress percent="100" show-info :status="status" active @active-end="finish" />
  <se-progress percent="50" show-info status="error" active-color="#f43131" />
</template>
<script>
  export default {
    data() {
      return {
        status: ''
      }
    },
    methods: {
      finish() {
        this.status = 'success'
      }
    }
  }
</script>

三、圆型进度条

原型进度条展示。

交互说明

1.展示在显示进度对象附近

2.进度数字从 0%开始，100%为结束

<div class="progress-demo-block">
  <se-progress type="circle" percent="0" show-info></se-progress>
  <se-progress
    type="circle"
    :percent="percent"
    show-info
    active
    active-mode="forwards"
  ></se-progress>
  <se-progress type="circle" percent="100" status="success" show-info></se-progress>
  <se-progress
    type="circle"
    percent="50"
    status="error"
    active-color="#f43131"
    show-info
  ></se-progress>
</div>
<script>
  export default {
    data() {
      return {
        percent: 50
      }
    },
    mounted() {
      setTimeout(() => {
        this.percent = 80
      }, 3000)
    }
  }
</script>
<style>
  .progress-demo-block {
    display: flex;
    justify-content: space-between;
    width: 360px;
  }
</style>

Props

Events