}, 0)
})
},
updateState() {
const now = moment(new Date(Date.now() - this.timeGap));//当前服务器时间
const diffStart=this.startTime.diff(now);//开始时间和服务器时间之差
const diffEnd=this.endTime.diff(now);//结束时间和服务器时间之差
if(diffStart<0){
this.start=true;
this.tip="秒杀已开始";
this.btnText="参加"
}else{
this.tip=`距离秒杀开始还剩${Math.ceil(diffStart/1000)}秒`;
this.btnText="活动未开始";
}
if(diffEnd<=0){
this.end=true;
if( !this.btnText==="已参加过活动"||this.btnText==="参加"){
this.tip="秒杀已结束";
this.btnText="活动已结束";
}
}
}
},
beforeDestroy() {
clearInterval(this.timeInterval)
}
}
</script>
<style scoped>
button[disabled]{
cursor: not-allowed;
}
</style>
父组件
<template>
<div>
<h1 style="color: red">设计一个秒杀倒计时的组件</h1>
<Spike :startTime="startTime" :endTime="endTime"></Spike>
</div>
</template><script>
import Spike from './Spike'
import moment from 'moment'
export default {
name: "index",
components:{
Spike
},
data(){
return{
endTime:moment(new Date(Date.now()+10*1000)),
startTime:moment(new Date(Date.now()))
}
}
}
</script>
<style scoped>
</style>
以上所述是小编给大家介绍的vue设计一个倒计时秒杀的组件详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
