Vue + Element 实现进度条 Progress

Vue + Element 进度条 Progress
前言：由于在公司可视化数字大屏项目中用到了，所以在博客里记录一下！如果能帮到你，那么点个赞吧，哈哈哈

话不多说，先直接上效果图，有需要的大家可借鉴借鉴。

HTML：

<template><div class="absolute-left-right-top-bottom charts-main"><div class="content"><div class="content-header"><span class="text-header-1">疾病名称</span><span class="text-header-2">人数</span><span class="text-header-3">占比数</span></div><divv-for="adapter in adapters":key="adapter.index":class="'item-' + (adapter.index + 1)"><div class="item-content"><div class="item-name">{{ adapter.name }}</div><div class="item-count">{{ adapter.count }}</div><div class="item-progress"><el-progress :show-text="false" :percentage="adapter.rate" color="['#24F4C0', '#B4CBC54C']":stroke-width="12"></el-progress></div><div class="item-rate">{{ adapter.rate }}%</div></div><div class="br"></div></div></div></div>
</template>

JS：

<script>
export default {name: 'illnessTop10',components: {},data() {return {adapters: [{name: '妊娠期高血压',count: 5,rate: 87,index: 0},{name: '妊娠肝内胆汁淤积',count: 5,rate: 61,index: 1},{name: '前置胎盘',count: 25,rate: 50,index: 2},{name: '胎盘早剥',count: 15,rate: 32,index: 3},{name: '子宫破裂',count: 35,rate: 24,index: 4},{name: '胎膜早破',count: 49,rate: 37,index: 5},{name: '羊水量异常',count: 5,rate: 10,index: 6},{name: '多胎妊娠',count: 45,rate: 34,index: 7},{name: '妊娠合并糖尿病',count: 41,rate: 31,index: 8},{name: '妊娠合并心脏病',count: 38,rate: 27,index: 9}]}}
}
</script>

CSS：

<style lang="scss" scoped>
.charts-main {background: url("/static/img/OPC/bg1.png") no-repeat;background-size: 100% 100%;width: 100%;height: 100%;position: relative;padding: 0 0 0 0;.content {flex: 1;display: flex;flex-direction: column;height: 95%;width: 100%;padding: 40px 0 0 0;&-header {position: relative;bottom: 4px;span {//width: 65px;//height: 17px;font-size: 16px;font-family: Microsoft YaHei UI;font-weight: 400;color: #8FA0D3;line-height: 31px;}.text-header-1 {position: relative;left: 20px;}.text-header-2 {position: relative;left: 138px;}.text-header-3 {position: relative;left: 236px;}}.br {width: 480px;height: 1px;background: #5B64BE;}.item-1 {padding: 0 0 0 20px;position: relative;.item-content {display: flex;flex-direction: row;.item-name {flex: 0 0 39%;font-size: 16px;font-family: Microsoft YaHei UI;font-weight: bold;color: #E9F4FF;line-height: 64px;}.item-count {flex: 0 0 11%;font-size: 16px;font-family: Microsoft YaHei UI;font-weight: bold;color: #F3F8FF;line-height: 64px;}.item-progress {flex: 0 0 23.5%;align-self: center;height: 10px;width: 429px;position: relative;left: 10px;/deep/ .el-progress-bar__outer {background-color: rgba(50,71,179,0.4);}/deep/ .el-progress-bar__inner {background: linear-gradient(90deg, #FF5AAC, #FF0066);}}.item-rate {flex: 0 0 10%;font-size: 16px;font-family: Microsoft YaHei UI;font-weight: bold;color: #FF0066;line-height: 64px;padding: 0 0 0 20px;}}}.item-2 {padding: 0 0 0 20px;position: relative;.item-content {display: flex;flex-direction: row;.item-name {flex: 0 0 39%;font-size: 16px;font-family: Microsoft YaHei UI;font-weight: bold;color: #E9F4FF;line-height: 64px;}.item-count {flex: 0 0 11%;font-size: 16px;font-family: Microsoft YaHei UI;font-weight: bold;color: #F3F8FF;line-height: 64px;}.item-progress {flex: 0 0 23.5%;align-self: center;height: 10px;width: 429px;position: relative;left: 10px;/deep/ .el-progress-bar__outer {background-color: rgba(50,71,179,0.4);}/deep/ .el-progress-bar__inner {background: linear-gradient(90deg, #FFC75A, #FF5400);}}.item-rate {flex: 0 0 10%;font-size: 16px;font-family: Microsoft YaHei UI;font-weight: bold;color: #FFC75A;line-height: 64px;padding: 0 0 0 20px;}}}.item-3 {padding: 0 0 0 20px;position: relative;.item-content {display: flex;flex-direction: row;.item-name {flex: 0 0 39%;font-size: 16px;font-family: Microsoft YaHei UI;font-weight: bold;color: #E9F4FF;line-height: 64px;}.item-count {flex: 0 0 11%;font-size: 16px;font-family: Microsoft YaHei UI;font-weight: bold;color: #F3F8FF;line-height: 64px;}.item-progress {flex: 0 0 23.5%;align-self: center;height: 10px;width: 429px;position: relative;left: 10px;/deep/ .el-progress-bar__outer {background-color: rgba(50,71,179,0.4);}/deep/ .el-progress-bar__inner {background: linear-gradient(90deg, #37E08B, #02B317);}}.item-rate {flex: 0 0 10%;font-size: 16px;font-family: Microsoft YaHei UI;font-weight: bold;color: #37E08B;line-height: 64px;padding: 0 0 0 20px;}}}.item-4, .item-5, .item-6, .item-7, .item-8, .item-9, .item-10 {padding: 0 0 0 20px;position: relative;.item-content {display: flex;flex-direction: row;.item-name {flex: 0 0 39%;font-size: 16px;font-family: Microsoft YaHei UI;font-weight: bold;color: #E9F4FF;line-height: 64px;}.item-count {flex: 0 0 11%;font-size: 16px;font-family: Microsoft YaHei UI;font-weight: bold;color: #F3F8FF;line-height: 64px;}.item-progress {flex: 0 0 23.5%;align-self: center;height: 10px;width: 429px;position: relative;left: 10px;/deep/ .el-progress-bar__outer {background-color: rgba(50,71,179,0.4);}/deep/ .el-progress-bar__inner {background: linear-gradient(90deg, #2357EB, #16D8E9);}}.item-rate {flex: 0 0 10%;font-size: 16px;font-family: Microsoft YaHei UI;font-weight: bold;color: #F3F8FF;line-height: 64px;padding: 0 0 0 20px;}}}}
}
</style>

Vue + Element 实现进度条 Progress相关推荐

pdf html5 阅读进度,HTML5的进度条progress元素
原标题:HTML5的进度条progress元素 progress元素属于HTML5新元素,指进度条.IE10+以及其他靠谱浏览器都支持. 体验一下效果: 在html里写入查看浏览器效果:不同浏览器下 ...
vue 视频时间进度条组件
vue 视频时间进度条组件有些视频是以视频流的形式进行渲染的,没有视频滚动条,所以就写了24h的时间组件实现思路: 1,24h的时间刻度线总宽度为12960px 2,点击24h线的某一点,获取这 ...
vue 视频时间进度条组件-使用npm组件
vue 视频时间进度条组件有些视频是以视频流的形式进行渲染的,没有视频滚动条,所以就写了24h的时间组件组件已上传到npm上,npm i as-time-line下载安装即可,最少需要1.2.0 ...
vue 圆形百分比进度条_快速构建一个圆形的进度条
在一些特别生的网站上,用户需要一个可视化的是示,以表明网站资源仍然在加载.从Spinner到Skeleton屏幕有不同的方法来解决这类的用户体验效果. 如果我们使用的是开箱即用的解决方案,它为我们提供 ...
linux dd 进度条,Progress 进度条 – DDProgressHUD
DDProgressHUD Progress 进度条,UIActivityIndicatorView 小菊花,弹窗,状态显示,高度自定义 DDProgressHUD的介绍提供了四种类型的展示: 显示 ...
C# Windows 7任务栏开发之进度条(Progress Bar)
Windows 7 任务栏为我们增添了许多其他功能:Jump Lists,Window Preview,Progress Bar,Overlay Icon 等等. 新任务栏的功能使我们的操作更加方便快 ...
利用 element ui 进度条实现渐变条纹进度条
首先我们看下需要完成的效果首先可以看到是一个有白色条纹,以及一个渐变色的条纹的进度条第一部分呢我们可以先写出这个白色的条纹我们可以利用以下代码实现白色条纹 .el-progress-bar_ ...
vue实现斑马线进度条
看下效果: 用到的图片: 先保存进度条的两种背景,第一种是底色黑色,第二种是用于展示进度的米黄色背景整体思想: 用一个小单元作为背景图片,然后在style里面设置进度条的长度这样 ...
VUE“粘性”阅读进度条
这个进度条是网上一个实例,原实例使用jQuery实现的查看,最近在用vue-cli,所以就用vue实现该组件查看. 这个进度条有有意思的地方是:用户的一系列操作都和导航息息相关.一般来说,普通的导航, ...

Vue + Element 实现进度条 Progress

Vue + Element 实现进度条 Progress相关推荐

最新文章

热门文章