el-badge上角标数据+定时器刷新数据

本文主要是介绍el-badge上角标数据+定时器刷新数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

背景

在任务图标左上方显示总任务任务进度

需求分析

图标+标记+获取进度接口+实时更新数据

解决方案

使用element-ui的组件

1. 图标el-icon
   参考文档： https://element.eleme.cn/#/zh-CN/component/icon
2. 左上角提示el-badge
   参考文档： https://cloud.tencent.com/developer/section/1489890
3. 获取任务进度并且实时刷新进度==》定时器
   （定时器很消耗性能，暂未学习到其他方法，后续补充）

案例

尝试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上角标数据+定时器刷新数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---