当前位置:Gxlcms > JavaScript > vue超时计算的组件实例代码

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

时间:2021-07-01 10:21:17 帮助过:4人阅读

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

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

父页面

  1. <template>
  2. <div>
  3. <div class="dateDiv" :key="index" v-for="(item,index) in TimeArray">
  4. <p>{{item.name}}</p>
  5. <dateComponent :index="index" :key="item.timeDif" ref="dateComponent" :dateTimeStamp="item.timeDif"></dateComponent>
  6. <el-button @click="delUnit(index)">删除</el-button>
  7. </div>
  8. </div>
  9. </template>
  10. <script>
  11. import datajson from '../index/data.json'
  12. import dateComponent from './dateComponent'
  13. export default {
  14. name:'timestamp',
  15. components:{
  16. dateComponent
  17. },
  18. data(){
  19. return {
  20. TimeArray: datajson.timestamp.TimeArray
  21. /*
  22. "timestamp":{
  23. "TimeArray":[{
  24. "name":"预约单2",
  25. "timeDif":"855000"
  26. },{
  27. "name": "预约单2",
  28. "timeDif": "801000"
  29. },{
  30. "name": "预约单3",
  31. "timeDif": "95000"
  32. },{
  33. "name": "预约单4",
  34. "timeDif": "45000"
  35. },{
  36. "name": "预约单5",
  37. "timeDif": "495000"
  38. },{
  39. "name": "预约单6",
  40. "timeDif": "195000"
  41. }]
  42. }
  43. */
  44. }
  45. },
  46. methods:{
  47. delUnit:function (index) {
  48. this.TimeArray.splice(index,1)
  49. }
  50. }
  51. }
  52. </script>
  53. <style scoped>
  54. .dateDiv{
  55. display: inline-block;
  56. border: 1px solid #e5e5e5;
  57. width: 200px;
  58. height: 80px;;
  59. }
  60. </style>

超时计算组件 overtimeComponent.vue

  1. <template>
  2. <div>
  3. <span>{{formatTimeStamp}}</span>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. props:["dateTimeStamp","index"],
  9. name:'dateComponent',
  10. data(){
  11. return {
  12. flag:false,
  13. formatTimeStamp:"",
  14. interval : ""
  15. }
  16. },
  17. mounted() {
  18. var difValue = parseInt(this.dateTimeStamp);
  19. this.formatTimeStamp = this.setResultStr(difValue)
  20. this.interval = setInterval(() => {
  21. difValue += 1000
  22. this.formatTimeStamp = this.setResultStr(difValue)
  23. }, 1000);
  24. },
  25. beforeDestroy (){
  26. clearInterval(this.interval)
  27. },
  28. methods:{
  29. setResultStr:function (difValue) {
  30. var day = Math.floor(difValue / 1000 / 60 / 60 / 24);//天
  31. difValue = difValue % (1000 * 60 * 60 * 24);
  32. var hour = Math.floor(difValue / 1000 / 60 / 60);//小时
  33. difValue = difValue % (1000 * 60 * 60);
  34. var min = Math.floor(difValue / 1000 / 60);//分钟
  35. difValue = difValue % (1000 * 60);
  36. var second = Math.floor(difValue / 1000);
  37. if(day === 0 && hour==0 && min == 0){
  38. return "超时:" + second + "秒"
  39. }else if(day === 0 && hour==0){
  40. return "超时:" + min + "分" + second + "秒"
  41. }else if(day === 0){
  42. return "超时:" + hour + "小时" + min + "分" + second + "秒"
  43. }else{
  44. return "超时:" + day + "天" + hour + "小时" + min + "分" + second + "秒"
  45. }
  46. }
  47. }
  48. }
  49. </script>
  50. <style scoped>
  51. </style>

总结

以上所述是小编给大家介绍的vue超时计算的组件实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

人气教程排行