el-progress入门学习

知识点

percentage为百分比，范围是0~100
status的值可以为success,warning,exception
format自带percentage参数，可以格式化文本显示效果
text-inside设置为true，文本显示在内部
stroke-width设置的直径宽度
color设置颜色，可以为字符串，数组或是函数，数组元素的两个属性分别为color,percentage，想象成switch语句percentage相当于小于某百分比时，显示指定颜色
type可以设置成line,circle,dashboard，分别为线性，圆形，方向盘型

效果图

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
</head><body><div id="app"><el-progress :percentage='50'></el-progress><el-progress :percentage='100'></el-progress><el-progress :percentage='100' :format='formatFull'></el-progress><el-progress :percentage='100' status="success"></el-progress><el-progress :percentage='100' status="warning"></el-progress><el-progress :percentage='100' status='exception'></el-progress><el-progress :percentage='50' :text-inside='true' :stroke-width='20' status='success'></el-progress><el-progress :percentage='60' :text-inside='true' :stroke-width='22' status='warning'></el-progress><el-progress :percentage='70' :text-inside='true' :stroke-width='24' status='exception'></el-progress><el-progress :percentage='80' :text-inside='true' :stroke-width='26'></el-progress><el-progress :percentage='percentage' :color='percentageColor'></el-progress><el-progress :percentage='percentage' :color='percentageColors'></el-progress><el-progress :percentage='percentage' :color='percentageSetColors'></el-progress><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><br><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><el-progress type='dashboard' :color='percentageColors' :percentage='percentage'></el-progress></div>
</body></html><script>new Vue({el: "#app",data() {return {percentage: 30,percentageColor: 'blue',percentageColors: [{ color: 'red', percentage: 20 },{ color: 'orange', percentage: 40 },{ color: 'yellow', percentage: 60 },{ color: 'green', percentage: 80 },{ color: 'blue', percentage: 100 }],}},methods: {formatFull(percentage) {return percentage === 100 ? '满' : `${percentage}%`},percentageSetColors(percentage) {if (percentage < 30) {return "red";} else if (percentage < 70) {return "orange";} else {return "yellow";}},decrease() {let percentage = this.percentage;return this.percentage = percentage < 10 ? 0 : percentage - 10;},increase() {let percentage = this.percentage;return this.percentage = percentage > 90 ? 100 : percentage + 10;}}})
</script>

官网

el-progress学习官网

el-progress入门学习相关推荐

深度学习（十一）RNN入门学习
RNN入门学习原文地址:http://blog.csdn.net/hjimce/article/details/49095371 作者:hjimce 一.相关理论 RNN(Recurrent Neu ...
pytorch 入门学习反向传播-4
pytorch 入门学习反向传播反向传播 import numpy as np import matplotlib.pyplot as plt import torchdef forward(x): ...
java推送叮叮消息,叮叮叮！请及时签收入门学习Java导航路线
原标题:叮叮叮!请及时签收入门学习Java导航路线引言想必有很多像我一样刚学习Java会有很迷茫的人吧,今天给小伙伴们整理了一些资料,有需要的小伙伴们可以私信我,顺便推荐一个免费学习的Qqun,里 ...
messageBox的入门学习
messageBox的入门学习知识点 this.$alert用于弹出消息 this.$confirm用于确认消息,显示取消按钮 this.$prompt用于提交消息,单个数据的提交使用它,复杂的数据 ...
el-avatar入门学习
el-avatar入门学习知识点 size控制大小,可以设置Number,或者字符串large,medium,small shape控制头像形状,默认为circle,可设置为square,为方形 i ...
el-tag入门学习
el-tag入门学习知识点 type属性默认是蓝色,还可以设置success,info,warning,danger size属性默认最大,还可以设置medium,small,mini closab ...
SpringBoot入门学习（五）之旅游网站项目
目录 1.项目需求 2.技术需求 3.pom.xml 4.application.yml 4.MybatisPlus的配置文件 5.springboot中配置日期类型转换器 6.用户管理 7.线路管理 ...
el-table入门学习
el-table入门学习知识点 data为表单数据,格式为[{...},{...},{...}] border显示表格边框 fix默认为左固定,设置为"right"右固定 hei ...
el-drawer的入门学习
el-drawer的入门学习适用场景 el-drawer与el-dialog有几乎相同的API,不同的是el-dialog是居中显示,el-drawer可以根据不同的方向,在上下左右弹出显示知识点 ...
el-menu入门学习
el-menu入门学习知识点首页效果为el-menu中嵌套el-menu-item,el-menu-item中左侧图标填充,右侧文字填充部门效果为el-menu嵌套el-submenu,el-s ...

el-progress入门学习

el-progress入门学习

知识点

效果图

代码

官网

el-progress入门学习相关推荐

最新文章

热门文章