vue中使用moment 设置倒计时的方法

日常开发中时常需要使用倒计时的方法现在进行封装一下

//第一步 引入moment
import moment from 'moment';let nowTime:any = ref('')//当前时间
let diffTime:any = ref('')//当前时间和指定时间的差值
let countdown:any = ref(0)//倒计时
// 设置setInterval 用于每秒钟输出一次当前时间 更新倒计时的时间
let interval:any = setInterval(function() {//按照时分秒格式 获取当前时间  需要年月日这样设置 "YYYY-MMM-DDD HH:mm:ss"nowTime.value = moment().format("HH:mm:ss")//通过比较时间差 获取一个秒数值//比较时间差 按照秒seconds进行比较  如果是年月日比较如右设置 moment('2024-02-05 10:00:00', 'YYYY-MMM-DDD hh:mm:ss')//moment() 为当前时间diffTime.value = moment('10:00:00', 'hh:mm:ss').diff(moment(), "seconds")//倒计时   如果只需要最后5分钟才显示倒计时 这进行判断if(diffTime.value<5*60){let h = moment.duration(diffTime.value, 'seconds').hours()//小时let m = moment.duration(diffTime.value, 'seconds').minutes()//分钟let s = moment.duration(diffTime.value, 'seconds').seconds()//秒countdown.value = `${h<10?'0'+h:h}:${m<10?'0'+m:m}:${s<10?'0'+s:s}`}// 判断是否需要执行定时器if(diffTime.value < 0 ){clearInterval(interval)//清除定时器}
}, 1000);//页面销毁时触发
onBeforeUnmount(()=>{clearInterval(interval)//清除定时器
})