elementui progress

使用 ElementUI Progress 组件

ElementUI 的 Progress 组件用于展示操作进度，支持多种样式和配置。以下是一些常见用法和配置选项。

基本用法

通过 percentage 属性设置进度百分比，范围从 0 到 100。

<el-progress :percentage="50"></el-progress>

进度条样式

通过 type 属性可以设置不同的进度条样式，可选值包括 line（默认）、circle 和 dashboard。

<el-progress :percentage="50" type="circle"></el-progress>
<el-progress :percentage="50" type="dashboard"></el-progress>

自定义颜色

使用 color 属性可以自定义进度条颜色，支持传入颜色字符串或函数。

<el-progress :percentage="50" color="#ff0000"></el-progress>

动态进度

通过绑定 percentage 属性可以实现动态进度效果。

<el-progress :percentage="dynamicPercentage"></el-progress>
<script>
export default {
  data() {
    return {
      dynamicPercentage: 0
    }
  },
  mounted() {
    setInterval(() => {
      if (this.dynamicPercentage < 100) {
        this.dynamicPercentage += 10
      }
    }, 1000)
  }
}
</script>

进度条宽度

通过 stroke-width 属性可以设置进度条的宽度。

<el-progress :percentage="50" :stroke-width="20"></el-progress>

进度条状态

使用 status 属性可以设置进度条的状态，可选值包括 success、exception 和 warning。

<el-progress :percentage="100" status="success"></el-progress>
<el-progress :percentage="50" status="exception"></el-progress>
<el-progress :percentage="70" status="warning"></el-progress>

自定义文本内容

通过 format 属性可以自定义进度条文本内容。

<el-progress 
  :percentage="50" 
  :format="formatText">
</el-progress>
<script>
export default {
  methods: {
    formatText(percentage) {
      return `当前进度：${percentage}%`
    }
  }
}
</script>

环形进度条

环形进度条可以通过 type="circle" 实现，并支持设置 width 属性调整大小。

<el-progress 
  :percentage="50" 
  type="circle" 
  :width="100">
</el-progress>

仪表盘进度条

仪表盘进度条可以通过 type="dashboard" 实现，支持设置 gap-degree 和 gap-position 属性调整缺口角度和位置。

<el-progress 
  :percentage="50" 
  type="dashboard" 
  :gap-degree="90" 
  gap-position="bottom">
</el-progress>

以上是 ElementUI Progress 组件的常见用法和配置选项，可以根据实际需求灵活调整。