ElementUI 进度条组件

官方地址

https://element.eleme.io/#/zh-CN/component/progress

基础组件

<el-progress></el-progress>

进度条样式

样式由type属性声明，可取以下的值：

• line，线性进度条
• circle，环形进度条
• dashboard，仪表盘形进度条

  <h3>线性进度条</h3>
  <el-progress type="line" :percentage="50"></el-progress>
  
  <h3>环形进度条</h3>
  <el-progress type="circle" :percentage="70"></el-progress>
  
  <h3>仪表盘形进度条</h3>
  <el-progress type="dashboard" :percentage="60"></el-progress>

情境色

进度条情境色由status属性声明，可取以下的值：

• success
• warning
• exception

status做了两件事：

1. 更换进度条颜色
2. 将percentage的默认文字显示为对应情境色的图标

  <h2>情境色</h2>
  <h3>更换进度条颜色；将percentage的默认文字显示为对应情境色的图标</h3>
  <el-progress type="line" :percentage="100" status="success"></el-progress>
  <br />
  <el-progress type="circle" :percentage="70" status="warning"></el-progress>
  <br />
  <el-progress type="dashboard" :percentage="20" status="exception"></el-progress>

自定义颜色

自定义颜色由color属性指定，可接受以下类型：

• String，例如：#ccc | blue；
• Array，例如：[{color: 'String', percentage: 20}]；
• Funcation, 例如：color='customColorMethod，customColorMehthod(percentage) {return }

  <h2>会覆盖status的进度条颜色；但不会覆盖图标</h2>
  <h3>color接受字符串、对象数组、函数</h3>
  <el-progress type="line" :percentage="10" color="pink" status="success"></el-progress>
  
  <br />
  
  <el-progress type="circle" :percentage="percentage" :color="customColors"></el-progress>
  
	<div>
	  <el-button-group>
		<el-button icon="el-icon-minus" @click="decrease"></el-button>
		<el-button icon="el-icon-plus" @click="increase"></el-button>
	  </el-button-group>
	</div>
  
  <br />
  
  <el-progress type="dashboard" :percentage="percentage" :color="customColorMethod"></el-progress>

<script>
  export default {
    data() {
      return {
        percentage: 20,
        customColor: '#409eff',
        customColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ]
      };
    },
    methods: {
      customColorMethod(percentage) {
        if (percentage < 30) {
          return '#909399';
        } else if (percentage < 70) {
          return '#e6a23c';
        } else {
          return '#67c23a';
        }
      },
      increase() {
        this.percentage += 10;
        if (this.percentage > 100) {
          this.percentage = 100;
        }
      },
      decrease() {
        this.percentage -= 10;
        if (this.percentage < 0) {
          this.percentage = 0;
        }
      }
    }
  }
</script>

是否显示文字内容

文字内容的显示由show-text属性指定

  <h1>是否显示文字内容</h1>
  <el-progress type="line" :percentage="20" :show-text="false"></el-progress>

指定文字内容

自定义文字内容由format属性指定

  <h2>文字内容默认会显示percentage指定的内容；或者是status的情景图标</h2>
  <h3>通过format属性可以指定文字内容</h3>
  <el-progress type="line" :percentage="percentage" :format="format"></el-progress>

百分比内显

只适用于type="line"，并且最好配合stroke-width使用

  <h2>只适用于type="line"</h2>
  <h3>并且要结合stroke-width使用，指定进度条的高度</h3>
  <el-progress type="line" :percentage="20" :text-inside="true" :stroke-width="20"></el-progress>

进度条高度

stroke-width

画布宽度

只适用于type="circle | dashboard"

  <h2>只适用于type="circle | dashboard"</h2>
  <h3>也可以结合stroke-width使用，指定进度条的高度</h3>
  <el-progress type="circle" :percentage="20"  :stroke-width="20" :width="200"></el-progress>
  <el-progress type="dashboard" :percentage="20"  :stroke-width="20" :width="200"></el-progress>

属性

参数	说明	类型	可选值	默认值
percentage	百分比（必填）	number	0-100	0
type	进度条类型	string	line/circle/dashboard	line
stroke-width	进度条的宽度，单位 px	number	—	6
text-inside	进度条显示文字内置在进度条内（只在 type=line 时可用）	boolean	—	false
status	进度条当前状态	string	success/exception/warning	—
color	进度条背景色（会覆盖 status 状态颜色）	string/function/array	—	''
width	环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用）	number		126
show-text	是否显示进度条文字内容	boolean	—	true