快捷導(dǎo)航

vue超時計算的組件實例代碼

更新時間：2018年07月09日 16:20:24 作者：大象好帥8

這篇文章主要介紹了vue超時計算的組件實例代碼,需要的朋友可以參考下

需要對預(yù)約單進(jìn)行超時計算，但是后臺和客戶端時間不能保證一定一直，所以后臺返回客戶提交時間和請求結(jié)束時間的時間差進(jìn)行計算。

效果如下(此處只是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":"預(yù)約單2",
    "timeDif":"855000"
   },{
    "name": "預(yù)約單2",
    "timeDif": "801000"
   },{
    "name": "預(yù)約單3",
    "timeDif": "95000"
   },{
    "name": "預(yù)約單4",
    "timeDif": "45000"
   },{
    "name": "預(yù)約單5",
    "timeDif": "495000"
   },{
    "name": "預(yù)約單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>

總結(jié)

以上所述是小編給大家介紹的vue超時計算的組件實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: