用于展示操作进度，告知用户当前状态和预期。
Progress组件设置 percentage属性即可，表示进度调对应的百分比，必填，必须在0~100。通过format属性指定进度调文字内容。
<el-progress :percentage="50"></el-progress> <el-progress :percentage="100" :format="format"></el-progress> <el-progress :percentage="100" status="success"></el-progress> <el-progress :percentage="100" status="warning"></el-progress> <el-progress :percentage="50" status="exception"></el-progress> <script> export default { methods: { format(percentage) { return percentage === 100 ? '满' : `${percentage}%`; } } }; </script>效果图如下所示:
Progress组件可通过 stroke-width属性更改进度条的高度，并可通过 text-inside属性来将进度条描述置于进度条内部。
<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress> <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress> <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress> <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>效果图如下所示：
可以通过color设置进度条的颜色，color可以接受颜色字符串，函数和数组。
<el-progress :percentage="percentage" :color="customColor"></el-progress> <el-progress :percentage="percentage" :color="customColorMethod"></el-progress> <el-progress :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> <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>效果图如下所示：
Progress组件可通过type属性来指定使用环形进度条，在环形进度条中，还可以通过width属性设置其大小。
<el-progress type="circle" :percentage="0"></el-progress> <el-progress type="circle" :percentage="25"></el-progress> <el-progress type="circle" :percentage="100" status="success"></el-progress> <el-progress type="circle" :percentage="70" status="warning"></el-progress> <el-progress type="circle" :percentage="50" status="exception"></el-progress>效果图如下所示：
通过type属性来指定使用仪表盘形进度条。
<el-progress type="dashboard" :percentage="percentage" :color="colors"></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> <script> export default { data() { return { percentage: 10, colors: [ {color: '#f56c6c', percentage: 20}, {color: '#e6a23c', percentage: 40}, {color: '#5cb87a', percentage: 60}, {color: '#1989fa', percentage: 80}, {color: '#6f7ad3', percentage: 100} ] }; }, methods: { increase() { this.percentage += 10; if (this.percentage > 100) { this.percentage = 100; } }, decrease() { this.percentage -= 10; if (this.percentage < 0) { this.percentage = 0; } } } } </script>效果图如下所示:
