Hi各位,我是树林子,一个工作两年的程序员。
问如何用vue实现一个倒计时处理?总共分两步。
效果图:
第一步,封装一个倒计时组件,主要思想是通过父组件传参给子组件后,Watch做监听时间处理,来达到动态改变数字的状态。
子组件:countDown.vue 直接粘!
<template>
<span :endText="endText" :endTime="endTime">
<slot>{{ content }}</slot>
</span>
</template>
<script>
export default {
data() {
return {
content: '',
}
},
props: {//接收父组件的数据
endTime: {type: String, default: ''},
endText: {type: String, default: ''},
},
watch: {//监听时间的变化
endTime() {
this.countdowm(this.endTime)
}
},
methods: {
countdowm(timestamp) {
let self = this;
let nowTime = new Date();
let endTime = new Date(timestamp * 1000);
let t = endTime.getTime() - nowTime.getTime();
if (t > 0) {
let day = Math.floor(t / 86400000);
let hour = Math.floor((t / 3600000) % 24);
let min = Math.floor((t / 60000) % 60);
let sec = Math.floor((t / 1000) % 60);
hour = hour < 10 ? "0" + hour : hour;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
let format = '';
if (day > 0) {
// format = `${day}天${hour}小时${min}分${sec}秒`;
format = `距离开标日期,还剩${day}天${hour}小时${min}分`;
}
if (day <= 0 && hour > 0) {
format = `距离开标日期,还剩${hour}小时${min}分`;
// format = `${hour}小时${min}分${sec}秒`;
}
if (day <= 0 && hour <= 0) {
// format = `${min}分${sec}秒`;
format = `距离开标日期,还剩${min}分`;
}
self.content = format;
} else {
self.content = self.endText;
}
}
}
}
</script>
第二步,引用写好的组件,传值。
实际开发过程中,会应用到两种情况,一种是回调反显数值,在初始化时调用方法,对时间进行毫秒梳理;另一种是双向绑定,需要对时间进行特殊处理后,实时监听得到一个倒计时,在此处我直接给了一个默认值,同学们可以根据自己的需求来进行相对应的代码改造哈!
父组件
<template>
<Alert style="color: red">
//在模板种定义好调用的位置,我这里面事蓝色底,红色字
<countDown :endText="endText " :endTime="endTime"/>
</Alert>
</template>
//记得引用进来
import countDown from './countDown'
export default {
components: {
//倒计时组件引用
countDown
},
data() {
return {
//这里面的的endTime也可以写在methods中调用
endTime: new Date().getTime() / 1000 + '' ,
//此处的时间可以反显时处理,或许双向绑定修改
// console.log(endTime)=>得到毫秒 1658030420 可在方法里面放入后台数据,new Date('放后台数据').getTime() / 1000 + ' ',但要记得调用方法
//默认文字,当时间传到子组件时,会判断是否具体约定时间是否有剩余
endText: '已过开标日期',
}
}
}
平时会更一些日常工作中遇到的问题,以此来记录自己的成长。
下期见面!Bye!