在写移动端的项目时,有个需求是,需要将后端返回的时间显示为“刚刚”,“几分钟前”。。。这种形式,写了个过滤器,记录在此:
// 时间格式(2021-07-02 12:12:12) 显示为几分钟前,几小时前等
Vue.filter('timeChange', function (value) {
// 拿到当前时间戳和发布时的时间戳
var curTime = new Date()
var postTime = new Date(value)
//计算差值
var timeDiff = curTime.getTime() - postTime.getTime()
// 单位换算
var min = 60 * 1000
var hour = min * 60
var day = hour * 24
// 计算发布时间距离当前时间的 天、时、分
var exceedDay = Math.floor(timeDiff / day)
var exceedHour = Math.floor(timeDiff / hour)
var exceedMin = Math.floor(timeDiff / min)
// 最后判断时间差
if (exceedDay > 0) {
return parseTime(value, '{y}{m}{d}')
} else {
if (exceedHour < 24 && exceedHour > 0) {
return exceedHour + '小时前'
} else if (exceedMin < 60 && exceedMin > 0) {
return exceedMin + '分钟前'
} else {
return '刚刚'
}
}
})
看起来挺好,但是存在一个bug:
在安卓中运行完好,没问题,但是在ios中就出错了,最后发现,ios对于“2021-07-05” 这种格式不兼容,必须是这种“2021/07/05”,所以又写了个方法用作转换
toTimeStamp = (time) => {
if (!time) return 0
if (typeof time === 'string') {
return new Date(time.replace(/-/g, '/')).getTime()
} else {
if (time.toString().length === 10) return new Date(time * 1000).getTime()
else return new Date(time).getTime()
}
}
此方法最后返回的是一个时间戳。
最后解决ios的不兼容问题