需要对预约单进行超时计算，但是后台和客户端时间不能保证一定一直，所以后台返回客户提交时间和请求结束时间的时间差进行计算。
效果如下(此处只是demo效果，所以有点丑。)
父页面
<template> <div> <div :key="index" v-for="(item,index) in TimeArray"> <p>{{item.name}}</p> <dateComponent :index="index" :key="item.timeDif" ref="dateComponent" :dateTimeStamp="item.timeDif"></dateComponent> <el-button @click="delUnit(index)">删除</el-button> </div> </div> </template> <script> import datajson from '../index/data.json' import dateComponent from './dateComponent' export default { name:'timestamp', components:{ dateComponent }, data(){ return { TimeArray: datajson.timestamp.TimeArray /* "timestamp":{ "TimeArray":[{ "name":"预约单2", "timeDif":"855000" },{ "name": "预约单2", "timeDif": "801000" },{ "name": "预约单3", "timeDif": "95000" },{ "name": "预约单4", "timeDif": "45000" },{ "name": "预约单5", "timeDif": "495000" },{ "name": "预约单6", "timeDif": "195000" }] } */ } }, methods:{ delUnit:function (index) { this.TimeArray.splice(index,1) } } } </script> <style scoped> .dateDiv{ display: inline-block; border: 1px solid #e5e5e5; width: 200px; height: 80px;; } </style>
超时计算组件 overtimeComponent.vue
<template> <div> <span>{{formatTimeStamp}}</span> </div> </template> <script> export default { props:["dateTimeStamp","index"], name:'dateComponent', data(){ return { flag:false, formatTimeStamp:"", interval : "" } }, mounted() { var difValue = parseInt(this.dateTimeStamp); this.formatTimeStamp = this.setResultStr(difValue) this.interval = setInterval(() => { difValue += 1000 this.formatTimeStamp = this.setResultStr(difValue) }, 1000); }, beforeDestroy (){ clearInterval(this.interval) }, methods:{ setResultStr:function (difValue) { var day = Math.floor(difValue / 1000 / 60 / 60 / 24);//天 difValue = difValue % (1000 * 60 * 60 * 24); var hour = Math.floor(difValue / 1000 / 60 / 60);//小时 difValue = difValue % (1000 * 60 * 60); var min = Math.floor(difValue / 1000 / 60);//分钟 difValue = difValue % (1000 * 60); var second = Math.floor(difValue / 1000); if(day === 0 && hour==0 && min == 0){ return "超时:" + second + "秒" }else if(day === 0 && hour==0){ return "超时:" + min + "分" + second + "秒" }else if(day === 0){ return "超时:" + hour + "小时" + min + "分" + second + "秒" }else{ return "超时:" + day + "天" + hour + "小时" + min + "分" + second + "秒" } } } } </script> <style scoped> </style>
总结
以上所述是小编给大家介绍的vue超时计算的组件实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: