Flask接口签名sign原理与实例代码浅析
285
2023-01-26
vue超时计算的组件实例代码
需要对预约单进行超时计算,但是后台和客户端时间不能保证一定一直,所以后台返回客户提交时间和请求结RYysAIpf束时间的时间差进行计算。
效果如下(此处只是demo效果,所以有点丑。)
父页面
{{item.name}}
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",http://
"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)
}
}
}
.dateDiv{
display: inline-block;
border: 1px solid #e5e5e5;
width: 200px;
height: 80px;;
}
超时计算组件 overtimeComponent.vue
{{formatTimeStamp}}
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 = setInRYysAIpfterval(() => {
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 + "秒"
}
}
}
}
总结
以上所述是给大家介绍的vue超时计算的组件实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~