需要对预约单进行超时计算，但是后台和客户端时间不能保证一定一直，所以后台返回客户提交时间和请求结束时间的时间差进行计算。

效果如下(此处只是demo效果，所以有点丑。)

父页面

<template> <div> <div class="dateDiv" :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 } }, 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超时计算的组件实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！