vue超时计算的组件实例代码

需要对预约单进行超时计算，但是后台和客户端时间不能保证一定一直，所以后台返回客户

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

 效果如下(此处只是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
 /*
 "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超时计算的组件实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！