Api

el-progress

基础使用

一个基础的进度条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="demo-box demo-progress">
  <el-progress :percentage="50" size="large"></el-progress>
  <el-progress :percentage="50" type="green" size="large"></el-progress>
  <el-progress :percentage="50"></el-progress>
  <el-progress :percentage="50" type="green"></el-progress>
  <el-progress :percentage="50" size="small"></el-progress>
  <el-progress :percentage="50" type="green" size="small"></el-progress>
</div>

<el-progress :percentage="50" size="large"></el-progress>
<el-progress :percentage="50" type="green" size="large"></el-progress>
<el-progress :percentage="50"></el-progress>
<el-progress :percentage="50" type="green"></el-progress>
<el-progress :percentage="50" size="small"></el-progress>
<el-progress :percentage="50" type="green" size="small"></el-progress>

带条纹效果

1
2
3
4
5
6
7

<div class="demo-box demo-progress">
  <el-progress :percentage="50" type="blue-stripe" size="large"></el-progress>
  <el-progress :percentage="50" type="green-stripe" size="large"></el-progress>
</div>

<el-progress :percentage="50" type="blue-stripe" size="large"></el-progress>
<el-progress :percentage="50" type="green-stripe" size="large"></el-progress>

API

参数 说明 类型 可选值 默认值
percentage 百分比 number 0
type 类型 string blue,green,blue-stripe,green-stripe blue
size 尺寸 string large, small