VUE倒计时组件
<template>
<span v-cloak class='orange'></span>
</template>
<script>
export default{
data(){
return {
// time: '',
now: 0
};
},
props: ['createTime'],
methods: {
formate(time){
if (time <= 0) {
this.$emit('timeOver')
return "已过期"
}
else if (time>0){
let hour = parseInt(time / 3600);
let min = parseInt((time - hour * 3600) / 60);
let sec = parseInt(time - hour * 3600 - min * 60)
return '还有' + hour + '小时' + min + '分钟' + sec + '秒过期';
}
}
},
mounted(){
let self = this;
setInterval(function () {
self.now = new Date().getTime();
}, 1000);
},
computed: {
time(){
let leftTime = parseInt(this.createTime) + (3*60 * 60) - parseInt(this.now/1000);
return this.formate(leftTime);
}
}
}
</script>
<style>
.orange {
color: orange;
}
</style>
分享一个之前项目中写的倒计时组件,可以用在订单支付倒计时或是订单有效期等相关区域