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

<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>

<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>