vue 扩展时间指令 功能时间转换成文字例如:(刚刚、2分钟前、
2019-06-05 本文已影响0人
放下手机出来嗨
/**
* 使用方式:1、时间戳毫秒级 <div v-z3-time="{ time: '1521279696000', type: '1' }"></div>
2、日期格式<div v-z3-time="{ time: '2018-03-22 10:21:12', type: '2' }"></div>
3、type=1 & type=2
(1)新闻的资讯按照时间1小时以内的是“多少分钟前”,1分钟内的资讯显示“刚刚”表示
(2)当天内显示“小时:分钟”, 如“1:00”
*/
Vue.directive('z3-time', (el, binding, vnode, oldVnode) => {
var dateTimeStamp = binding.value.time // 传入时间戳
var dateType = parseInt(binding.value.type)
if (dateTimeStamp.indexOf('-') == -1) {
dateTimeStamp = parseInt(binding.value.time)
}else{
dateTimeStamp = dateTimeStamp.replace(/-/g, '/')
}
if (dateTimeStamp != undefined && dateTimeStamp != null && dateTimeStamp != '') {
if (dateTimeStamp.length == 13) {
dateTimeStamp = parseInt(binding.value)
} else {
var timestamp = Date.parse(new Date(dateTimeStamp))
dateTimeStamp = timestamp
}
var now = new Date().getTime()
var day_conver = 1000 * 60 * 60 * 24
var hour_conver = 1000 * 60 * 60
var min_conver = 1000 * 60
var time_conver = now - dateTimeStamp
var temp_conver
var date = new Date(dateTimeStamp)
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' '
var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':'
var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes())
if (dateType === 1) {
if ((time_conver / day_conver) < 1) {
temp_conver = (time_conver / hour_conver)
if (temp_conver >= 1) {
el.innerHTML = parseInt(temp_conver) + "小时前"
} else {
temp_conver = (time_conver / min_conver)
if (temp_conver >= 1) {
el.innerHTML = parseInt(temp_conver) + "分钟前"
} else {
el.innerHTML = "刚刚"
}
}
} else {
el.innerHTML = M + D + h + m
}
} else {
var curTimeMillis = new Date().getTime() // 系统当前时间戳
let yesterdayDate = formatDate(dateTimeStamp,'MM:dd') //传入日期
let todayDate = formatDate(curTimeMillis,'MM:dd') //今天日期
var curDate = new Date(curTimeMillis)
var todayHoursSeconds = curDate.getHours() * 60 * 60
var todayMinutesSeconds = curDate.getMinutes() * 60
var todaySeconds = curDate.getSeconds()
var todayMillis = (todayHoursSeconds + todayMinutesSeconds + todaySeconds) * 1000
var todayStartMillis = curTimeMillis - todayMillis
var oneDayMillis = 24 * 60 * 60 * 1000
var yesterdayStartMilis = todayStartMillis - oneDayMillis
if (todayDate > yesterdayDate) {
el.innerHTML = "昨天 " + h + m
if(dateTimeStamp <= yesterdayStartMilis){
el.innerHTML = M + D + h + m
}
}else if(todayDate === yesterdayDate){
el.innerHTML = h + m
}
}
} else {
el.innerHTML = "--"
}
})
dateFilter(val) {
let oldTime = parseInt(val / 1000)
let nowTime = parseInt(new Date().getTime() / 1000) // 获取当前时间戳
let nowDate = new Date(nowTime * 1000) // 当前日期对象
let oldDate = new Date(oldTime * 1000) // 参数日期对象
let Y = oldDate.getFullYear()
let m = oldDate.getMonth() + 1
let d = oldDate.getDate()
let H = oldDate.getHours()
let i = oldDate.getMinutes()
// let s = oldDate.getSeconds()
function zeroize(num) {
return (String(num).length === 1 ? '0' : '') + num;
}
let timeDiff = nowTime - oldTime // 相差秒数
if (timeDiff < 60) {
return '刚刚'
} else if (timeDiff < 3600) { // 一小时前之内
return Math.floor(timeDiff / 60) + '分钟前';
} else if (nowDate.getFullYear() === Y && nowDate.getMonth() + 1 === m && nowDate.getDate() === d) {
return '今天' + zeroize(H) + ':' + zeroize(i);
} else {
let newDate = new Date((nowTime - 86400) * 1000); // 当前时间减一天(昨天)
if (newDate.getFullYear() === Y && newDate.getMonth() + 1 === m && newDate.getDate() === d) {
return '昨天' + zeroize(H) + ':' + zeroize(i);
} else if (nowDate.getFullYear() === Y) {
return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
} else {
return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
}
}
}