您好,登錄后才能下訂單哦!
需要對預約單進行超時計算,但是后臺和客戶端時間不能保證一定一直,所以后臺返回客戶提交時間和請求結束時間的時間差進行計算。
效果如下(此處只是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超時計算的組件實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。