Vue + Element 实现进度条 Progress

最新推荐文章于 2024-06-06 15:00:24 发布
最新推荐文章于 2024-06-06 15:00:24 发布
阅读量2.2k 收藏 8
点赞数 2
分类专栏： 前端组件 文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jonsnow595/article/details/122524740
版权

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>
            <div
                v-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>
爱吃香菜的胡先森
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue 中 进度条小球
wpb1109的博客
08-23 318
交叉 <template> <div class="about"> <div class="line"></div> <div class="line active"></div> <div class="small-ball" @touchstart="FnStart"></div> <div class="small-ball ac" @touchstart="F
进度条上的小圆点怎么做_如何实现圆形的进度条(ProgressBar)
weixin_39705193的博客
12-22 1453
在我们实际的工作中可能经常使用到圆形的进度条，但是这是怎么实现的呢？其实这只不过是修改了一下ProgressBar的模板，我们在下面的代码中我们将ProgressBar的Value值绑定到Border的Background上面，并且使用了一个ValueToProcessConverter的转换器进行相应地转换，这里重点介绍一下这个转换器下面介绍这部分的源码，并做简要的分析：首先，获取Progres...
进度条(el-progress)控制快慢(带遮罩的进度条)
wangmj518的专栏
09-21 447
最后推荐一个网站,里面有好几种组件,样式种类很多也很酷炫哦。
vue3中进度条上加高亮圆点
最新发布
wch19960518的博客
06-06 197
小圆点基于进度条定位（left）。
Vue3进度条（Progress）
Mr Dear的博客
04-06 9141
用于展示操作的当前进度组件，进度条和进度圈均支持渐变色，功能丰富，简单易用😁😁
vue + element UI 实现表格数据导出 Execl 表格
liyifeng112的博客
09-29 638
首先这个导出 基于 这些插件 xlsx、file-saver、xlsx-style 下载依赖 npm install --save xlsx npm install --save file-saver npm install --save xlsx-style tips1：如果需要调整表格样式 需要下载 xlsx-style 如果不需要样式 可以不用下载 引入依赖 import FileSaver from 'file-saver' import XLSX from 'xlsx' impor.
vue中页面加载进度条效果的实现(NProgress)，NProgress.start()开启进度条，NProgress.done()完成进度条
2301_76866366的博客
07-14 2563
vue中页面加载进度条效果的实现(NProgress)，NProgress.start()开启进度条，NProgress.done()完成进度条
基于vue-element组件实现音乐播放器功能
08-27
"基于vue-element组件实现音乐播放器功能" 本篇文章主要介绍了如何使用 Vue.js 框架和 Element 组件库来实现一个音乐播放器的功能。该播放器可以播放音乐、调整音量、显示进度条等功能。 首先，文章中使用了 ...
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在Vue.js开发中，Element UI 是一款非常流行的前端UI库，它提供了丰富的组件，使得开发者能够快速构建美观的用户界面。在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-...
layui-progress+element+jquery+js设计一个动态进度条
09-04
本项目利用layui-progress、element、jQuery和JavaScript技术，巧妙地设计了一个动态进度条，旨在提供一个易于学习的示例。 layui-progress是layui框架中的一个组件，它提供了丰富的进度条样式和自定义选项。layui...
Vue+Openlayers自定义轨迹动画
10-14
在本文中，我们将深入探讨如何使用Vue.js框架与OpenLayers库来实现自定义的轨迹动画。Vue.js是一个轻量级的前端JavaScript框架，用于构建用户界面。而OpenLayers则是一个强大的开源JavaScript库，用于在Web上展示...
＜ ElementUi组件库： el-progress 进度条Bug及样式调整 ＞
一个平平无奇的技术宅
05-25 8604
在 Vue + elementUi 开发中，在使用Progress进度条时，往往会因为需求原型太过花里胡哨而烦恼（原本的样式并不能满足需求）。为什么呢？因为这个组件elementUi并没有提供过多的自定义属性及插槽，对的，插槽也没有，不能自定义进度条文本样式。即使在elementUi的文档里面写了属性，但是实际使用并未生效（怀疑是bug）。Tips: 基于 elementUi来说，好像elementUi - Plus升级了，修复了bug，也增加了对应的属性、开放了插槽！
Vue2进度条（Progress）
热门推荐
Mr Dear的博客
04-08 2万+
可自定义设置以下属性： 进度条总宽度（width），默认600px 当前进度（progress），默认36 进度条线的宽度（strokeWidth），默认8px 是否显示进度数值或状态图标（showInfo），默认true
解决前端项目场景问题：vue+element进度条el-progress渲染后端动态数据
意初的博客
08-30 2034
vue+element进度条el-progress渲染后端动态数据。percentage：百分比 format：指定文字内容 给它们前面加一个：（冒号），进行回调函数。将数据传给el-progress进度条
elementUI在环形进度条el-progress中添加图标
商朝
12-07 2515
效果图 由于’饿了么’进度条不支持中心添加图标所以我们采用最原始的’父相子绝’来调整位置和大小 <div class="progress-div"> <el-progress type="circle" :percentage="100"
vue+elementUI el-progress实现可拖拽进度条
li222248的博客
05-19 3147
vue+elementUI el-progress实现可拖拽进度条
vue表格行添加进度条、element ui表格添加进度条
李程程的博客
04-03 3360
vue表格行添加进度条、element ui表格添加进度条
在Vue中使用NProgress可以实现页面加载时的进度条效果
weixin_39273589的博客
08-26 649
注意：在Vue3中，NProgress作为Vue3插件的使用方式稍有不同，但原理是一样的。当然，你也可以根据自己的需求，进一步自定义NProgress的样式和行为。4. 在Vue的根组件中，使用``来渲染路由组件。3. 创建一个全局的路由守卫，在路由跳转前启动进度条，在路由跳转后结束进度条。通过以上步骤，我们就可以在Vue3中使用NProgress实现进度条效果了。2. 在main.js文件中，引入NProgress和其对应的样式文件。
组件-Element---Progress （进度条）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
12-17 1602
<el-progress type="circle" :percentage="0"></el-progress> <el-progress type="circle" :percentage="25" :color="colors"></el-progress> <el-progress type="circle" :percentage="100" status="success"></el-progress> <el-pro
springboot+vue实现进度条
06-13
要实现进度条，可以使用element-ui组件库中的el-progress组件。具体实现步骤如下： 1. 在vue项目中安装element-ui组件库： ``` npm install element-ui --save ``` 2. 在main.js文件中引入element-ui组件库： ```javascript import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 3. 在vue组件中使用el-progress组件： ```html <template> <div> <el-progress :percentage="percentage"></el-progress> </div> </template> <script> export default { data() { return { percentage: 0 }; }, methods: { startProgress() { // 模拟进度条增加 setInterval(() => { if (this.percentage < 100) { this.percentage += 10; } }, 1000); } }, mounted() { this.startProgress(); } }; </script> ``` 在上面的代码中，el-progress组件的percentage属性表示进度条的百分比，通过startProgress方法模拟进度条的增加，每秒增加10%，直到达到100%时停止增加。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱吃香菜的胡先森

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值