[原创] 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>