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


Posted in Javascript onJuly 09, 2018

需要对预约单进行超时计算,但是后台和客户端时间不能保证一定一直,所以后台返回客户提交时间和请求结束时间的时间差进行计算。

 效果如下(此处只是demo效果,所以有点丑。)

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>

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

Javascript 相关文章推荐
斜45度寻路实现函数
Aug 20 Javascript
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
javascript 动态创建表格
Jan 08 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
微信小程序自定义底部弹出框
Nov 16 #Javascript
详解vue中组件参数
Jul 09 #Javascript
微信小程序实现手指触摸画板
Jul 09 #Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 #Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 #Javascript
js中Object.defineProperty()方法的不详解
Jul 09 #Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 #Javascript
You might like
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python采用Django制作简易的知乎日报API
2016/08/03 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
python-地图可视化组件folium的操作
2020/12/14 Python
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
优秀员工个人的自我评价
2013/11/29 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
班子四风对照检查材料
2014/08/21 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python
python+opencv实现目标跟踪过程
2022/06/21 Python