vue超时计算的组件实例代码
程序员文章站
2022-06-16 23:04:05
需要对预约单进行超时计算,但是后台和客户端时间不能保证一定一直,所以后台返回客户提交时间和请求结束时间的时间差进行计算。
效果如下(此处只是demo效果,所以...
需要对预约单进行超时计算,但是后台和客户端时间不能保证一定一直,所以后台返回客户提交时间和请求结束时间的时间差进行计算。
效果如下(此处只是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超时计算的组件实例代码,希望对大家有所帮助