程序员给女朋友做的网站,三字型布局的网站,投资公司的钱从哪里来,中交路建子公司最新排名用于展示操作进度#xff0c;告知用户当前状态和预期。 常见于操作流程进度或某项任务的状态。 1.如何使用#xff1f; Progress 组件设置percentage属性即可#xff0c;表示进度条对应的百分比#xff0c;必填#xff0c;必须在 0-100。通过 format 属性来指定进度条文字… 用于展示操作进度告知用户当前状态和预期。 常见于操作流程进度或某项任务的状态。 1.如何使用 Progress 组件设置percentage属性即可表示进度条对应的百分比必填必须在 0-100。通过 format 属性来指定进度条文字内容。el-progress :percentage50/el-progress
el-progress :percentage100 :formatformat/el-progress
el-progress :percentage100 statussuccess/el-progress
el-progress :percentage100 statuswarning/el-progress
el-progress :percentage50 statusexception/el-progressscriptexport default {methods: {format(percentage) {return percentage 100 ? 满 : ${percentage}%;}}};
/script
2.百分比内显
百分比不占用额外控件适用于文件上传等场景。
/*Progress 组件可通过 stroke-width 属性更改进度条的高度
并可通过 text-inside 属性来将进度条描述置于进度条内部。*/el-progress :text-insidetrue :stroke-width26 :percentage70/el-progress
el-progress :text-insidetrue :stroke-width24 :percentage100 statussuccess/el-progress
el-progress :text-insidetrue :stroke-width22 :percentage80 statuswarning/el-progress
el-progress :text-insidetrue :stroke-width20 :percentage50 statusexception/el-progress
3.自定义颜色
可以通过 color 设置进度条的颜色color 可以接受颜色字符串函数和数组。
el-progress :percentagepercentage :colorcustomColor/el-progressel-progress :percentagepercentage :colorcustomColorMethod/el-progressel-progress :percentagepercentage :colorcustomColors/el-progress
divel-button-groupel-button iconel-icon-minus clickdecrease/el-buttonel-button iconel-icon-plus clickincrease/el-button/el-button-group
/divscriptexport 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
4.环形进度条
Progress 组件可通过 type 属性来指定使用环形进度条在环形进度条中还可以通过 width 属性来设置其大小。
el-progress typecircle :percentage0/el-progress
el-progress typecircle :percentage25/el-progress
el-progress typecircle :percentage100 statussuccess/el-progress
el-progress typecircle :percentage70 statuswarning/el-progress
el-progress typecircle :percentage50 statusexception/el-progress 5.仪表盘形进度条
通过 type 属性来指定使用仪表盘形进度条。 el-progress typedashboard :percentagepercentage :colorcolors/el-progress
divel-button-groupel-button iconel-icon-minus clickdecrease/el-buttonel-button iconel-icon-plus clickincrease/el-button/el-button-group
/divscriptexport 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
