本文主要是介绍el-badge上角标数据+定时器刷新数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
背景
在任务图标左上方显示总任务任务进度
需求分析
图标+标记+获取进度接口+实时更新数据
解决方案
使用element-ui的组件
- 图标el-icon
参考文档： https://element.eleme.cn/#/zh-CN/component/icon - 左上角提示el-badge
参考文档： https://cloud.tencent.com/developer/section/1489890 - 获取任务进度并且实时刷新进度==》定时器
（定时器很消耗性能，暂未学习到其他方法，后续补充）
案例
尝试1：绘制UI，用假数据
效果
<template><div style=" text-align: center;"><h2>进度</h2><!-- el-badge简单用法:value="progressData + '%'"显示的数据 :hidden="!hasTask" 判断是否要隐藏标记 :max="99" 最大值 --><el-badge:value="progressData + '%'":max="99":hidden="!hasTask"type="warning"><i class="el-icon-s-order"></i></el-badge></div>
</template><script>
export default {data() {return {//任务列表//模拟数据taskTable: [{id: 1,taskName: "p1",state: "Running",progress: 20},{id: 2,taskName: "p2",state: "End",progress: 100},{id: 3,taskName: "p3",state: "Fail",progress: 20},{id: 4,taskName: "p4",state: "Running",progress: 50}],//正在运行的任务countRunningTask: 0,//计算出的进度progressData: 0};},created() {this.getRunningTask();},methods: {//计算进度getRunningTask() {var tempCountRunningTask = 0;var sum = 0;for (var i = 0; i < this.taskTable.length; i++) {if (this.taskTable[i].state === "Running") {sum += this.taskTable[i].progress;tempCountRunningTask++;}}this.countRunningTask = tempCountRunningTask;this.progressData = Math.ceil(sum / tempCountRunningTask);}},computed: {//是否有任务hasTask() {if (this.countRunningTask == 0) {return false;}return true;}}
};
</script><style></style>案例二，连上接口，定时刷新数据，获取最新任务进度
尝试2，定时器刷新
添加定时器
mounted () {// 定时刷新任务进度this.timer = setInterval(this.getRunningTask, 1000);},beforeDestroy(){// 清楚定时器clearTimeout(this.timer);},
完整代码：
<template><div style=" text-align: center;"><h2>进度</h2><!-- el-badge简单用法:value="progressData + '%'"显示的数据 :hidden="!hasTask" 判断是否要隐藏标记 :max="99" 最大值 --><el-badge:value="progressData + '%'":max="99":hidden="!hasTask"type="warning"><i class="el-icon-s-order"></i></el-badge></div>
</template><script>
export default {data() {return {//任务列表//模拟数据taskTable: [// {// id: 1,// taskName: "p1",// state: "Running",// progress: 20// },// {// id: 2,// taskName: "p2",// state: "End",// progress: 100// },// {// id: 3,// taskName: "p3",// state: "Fail",// progress: 20// },// {// id: 4,// taskName: "p4",// state: "Running",// progress: 50// }],//正在运行的任务countRunningTask: 0,//计算出的进度progressData: 0};},created() {this.getRunningTask();},mounted () {// 定时刷新任务进度this.timer = setInterval(this.getRunningTask, 1000);},beforeDestroy(){// 清楚定时器clearTimeout(this.timer);},methods: {//计算进度async getRunningTask() {// 请求接口,利用接口模拟工具var api = "http://rap2api.taobao.org/app/mock/300471/getTaskList";const { data: res } = await this.$http.get(api);this.taskTable=res.data;// 开始计算var tempCountRunningTask = 0;var sum = 0;for (var i = 0; i < this.taskTable.length; i++) {if (this.taskTable[i].state === "Running") {sum += this.taskTable[i].progress;tempCountRunningTask++;}}this.countRunningTask = tempCountRunningTask;this.progressData = Math.ceil(sum / tempCountRunningTask);console.log("当前总进度==》"+this.progressData)}},computed: {//是否有任务hasTask() {if (this.countRunningTask == 0) {return false;}return true;}}
};
</script><style></style>尝试3，加入监听，优化定时器使用
参考文档：https://blog.csdn.net/qq_37210523/article/details/103121237
js有两种定时器
setInterval(function(){}, milliseconds)——会不停的调用函数setTimeout(function(){}, milliseconds)——只执行函数一次
setInterval会符合实时刷新的需求，但是单纯的使用setInterval会导致页面卡死！其原因与JS引擎线程有关, 用通俗话说就是setInterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终卡死网页。
优化方案
监听器
watch: {//定时器优化方案// progressData是要监听的数据progressData: function() {const timer = setInterval(() => {// 某些定时器操作this.getRunningTask();}, 500);// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。this.$once("hook:beforeDestroy", () => {clearInterval(timer);});}}
完整
<template><div style=" text-align: center;"><h2>进度</h2><!-- el-badge简单用法:value="progressData + '%'"显示的数据 :hidden="!hasTask" 判断是否要隐藏标记 :max="99" 最大值 --><el-badge:value="progressData + '%'":max="99":hidden="!hasTask"type="warning"><i class="el-icon-s-order"></i></el-badge></div>
</template><script>
export default {data() {return {//任务列表//模拟数据taskTable: [// {// id: 1,// taskName: "p1",// state: "Running",// progress: 20// },// {// id: 2,// taskName: "p2",// state: "End",// progress: 100// },// {// id: 3,// taskName: "p3",// state: "Fail",// progress: 20// },// {// id: 4,// taskName: "p4",// state: "Running",// progress: 50// }],//正在运行的任务countRunningTask: 0,//计算出的进度progressData: 0};},created() {this.getRunningTask();},mounted() {// 定时刷新任务进度// this.timer = setInterval(this.getRunningTask, 1000);},beforeDestroy() {// 清楚定时器// clearTimeout(this.timer);},methods: {//计算进度async getRunningTask() {// 请求接口,利用接口模拟工具var api = "http://rap2api.taobao.org/app/mock/300471/getTaskList";const { data: res } = await this.$http.get(api);this.taskTable = res.data;// 开始计算var tempCountRunningTask = 0;var sum = 0;for (var i = 0; i < this.taskTable.length; i++) {if (this.taskTable[i].state === "Running") {sum += this.taskTable[i].progress;tempCountRunningTask++;}}this.countRunningTask = tempCountRunningTask;this.progressData = Math.ceil(sum / tempCountRunningTask);console.log("当前总进度==》" + this.progressData);}},computed: {//是否有任务hasTask() {if (this.countRunningTask == 0) {return false;}return true;}},watch: {//清除定时器优化方案progressData: function() {const timer = setInterval(() => {// 某些定时器操作this.getRunningTask();}, 500);// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。this.$once("hook:beforeDestroy", () => {clearInterval(timer);});}}
};
</script><style></style>这篇关于el-badge上角标数据+定时器刷新数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
