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

以上就是vue超时计算的组件实例代码。人生旅途一场,总要逼自己一下吧,哪有什么年少轻狂,不过是年少有梦,梦总是要去追一下的吧。更多关于vue超时计算的组件实例代码请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

vue如何实现列表固定列滚动

vue如何实现伸缩菜单功能

vue项目中canvas如何实现截图功能