Progress进度条

用于展示操作进度，告知用户当前状态和预期。

线形进度条

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>

效果图如下所示:

Attributes

参数	说明	类型	可选值	默认值
percentage	百分比（必填）	number	0-100	0
type	进度条类型	string	line/circle/dashboard	line
stroke-width	进度条的宽度，单位px	nubmer	——	0
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
stroke-linecap	circle/dashboard	string	butt/round/square	round

Progress进度条相关推荐

微信小程序进度条样式_微信小程序组件progress进度条解读和分析
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行. progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pr ...
linux dd 进度条,Progress 进度条 – DDProgressHUD
DDProgressHUD Progress 进度条,UIActivityIndicatorView 小菊花,弹窗,状态显示,高度自定义 DDProgressHUD的介绍提供了四种类型的展示: 显示 ...
微信小程序 MinUI 组件库系列之 progress 进度条组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
html进度条实现原理,HTML5 progress进度条详解
HTML5 progress 元素简介 progress是HTML5的一个新元素,表示定义一个进度条,用途很广泛,可以用在文件上传的进度显示,文件下载的进度显示,也可以作为一种loading的加载状态 ...
elementui进度条如何设置_ElementUI之Progress进度条底色设置
ElementUI中Progress进度条组件官网给了如下属性: 这里的color很好理解就是显示实际进度的颜色(个人觉得叫背景色不太好).但是官网并没有给出设置底色的属性,只给了一个默认的颜色,F1 ...
直播平台搭建源码，uniapp progress进度条
直播平台搭建源码,uniapp progress进度条 .progress-container {height: 20rpx;display: flex;flex-direction: row;ali ...
微信小程序组件解读和分析：六、progress进度条
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行. progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pr ...
Flutter进度条Flutter圆形进度条Flutter条形进度条Flutter Progress进度条LinearProgressIndicator
更多文章请查看 flutter从入门到精通 Flutter Progress 1 条形无固定值进度条 //LinearProgressIndicator不具备设置高度的选项,可以使用SizedBox ...
bootstrap3的 progress 进度条
: 2.3版 3.0版 .bar .progress-bar .bar-* .progress-bar-* 2.代码: [html] view plaincopy < ...
微信小程序进度条样式_微信小程序—progress(进度条)
设置进度条颜色(请使用十六进制颜色值,例如:#ff00ff) 未选择的进度条的颜色(请使用十六进制颜色值,例如:#ff00ff) 设置/取消进度条从左往右的动画设置/取消进度条右侧显示百分比 //获 ...

Progress进度条

Progress进度条

线形进度条

百分比内显

自定义颜色

环形进度条

仪表盘形进度条

Attributes

Progress进度条相关推荐

最新文章

热门文章