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