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