Progress 组件设置percentage
属性即可,表示进度条对应的百分比,必填,必须在 0-100。通过 format
属性来指定进度条文字内容。
可以通过 color
设置进度条的颜色,color
可以接受颜色字符串,函数和数组。
Progress 组件可通过 type
属性来指定使用环形进度条,在环形进度条中,还可以通过 width
属性来设置其大小。
通过 type
属性来指定使用仪表盘形进度条。
<template>
<div>
<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>
<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>
<div style="margin-top: 50px;">
<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>
</div>
<div>
<el-progress type="dashboard" :percentage="50" :color="colors"></el-progress>
</div>
</div>
</template>
<script>
export default {
data() {
return {
dynamicTags: ['标签一', '标签二', '标签三'],
inputVisible: false,
inputValue: ''
};
}
}
</script>