转换函数
首先封一个时间戳转换函数 time.js
// time.js
var Time = {
//获取当前时间戳
getUnix: function () {
var date = new Date();
return date.getTime();
},
//获取今天0点0分0秒的时间戳
getTodayUnix: function () {
var date = new Date();
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
return date.getTime();
},
//获取今年1月1日0点0分0秒的时间戳
getYearUnix: function () {
var date = new Date();
date.setMonth(0);
date.setDate(1);
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
return date.getTime();
},
//获取标准年月日
getLastDate: function (time) {
var date = new Date(time);
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
return date.getFullYear() + '-' + month + '-' + day;
},
//转换时间
getFormatTime: function (timestamp) {
var now = this.getUnix(); // 当前时间戳
var today = this.getTodayUnix(); // 今天0点的时间戳
var year = this.getYearUnix(); // 今年0点的时间戳
var timer = (now - timestamp) / 1000; // 转换为秒级时间戳
var tip = '';
if (timer <= 0) {
tip = '刚刚';
} else if (Math.floor(timer / 60) <= 0) {
tip = '刚刚';
} else if (timer < 3600) {
tip = Math.floor(timer / 60) + '分钟前';
} else if (timer >= 3600 && (timestamp - today >= 0)) {
tip = Math.floor(timer / 3600) + '小时前';
} else if (timer / 86400 <= 31) {
tip = Math.ceil(timer / 86400) + '天前';
} else {
tip = this.getLastDate(timestamp);
}
return tip;
}
}
module.exports = Time;
使用指令
官方文档 自定义指令
- 全局指令
// main.js （入口文件）
// 引入Time（自行替换相对路径）
import Time from '../static/time';
// 注册一个全局自定义指令 `v-time`
Vue.directive('time', {
// 指令所在组件的 VNode 及其子 VNode 全部更新后调用
componentUpdated: function (el, binding) {
el.innerHTML = Time.getFormatTime(binding.value);
el.__timeout__ = el.innerHTML = Time.getFormatTime(binding.value);
}
})
// index.vue
// 转换时间戳变量 createTime
<div v-time="createTime"></div>
- 局部指令
// index.vue
// ...
<div v-time="createTime"></div>
// ...
// 引入Time（自行替换相对路径）
import Time from '../static/time';
// ...
directives: {
time: {
componentUpdated: function (el, binding) {
el.innerHTML = Time.getFormatTime(binding.value);
el.__timeout__ = el.innerHTML = Time.getFormatTime(binding.value);
}
}
}
使用过滤器
官方文档 过滤器
- 全局过滤器
// main.js （入口文件）
// 引入Time （自行替换相对路径）
import Time from '../static/time';
// 注册一个全局过滤器 `formatTime`
Vue.filter('formatTime', function (value) {
if (!value) return '';
return Time.getFormatTime(value);
})
// index.vue
// 转换时间戳变量 createTime
<div v-time="createTime">{{ createTime | formatTime }}</div>
- 局部过滤器
// index.vue
// ...
<div v-time="createTime">{{ createTime | formatTime }}</div>
// ...
// 引入Time（自行替换相对路径）
import Time from '../static/time';
// ...
filters: {
formatTime: function (value) {
if (!value) return '';
return Time.getFormatTime(value);
}
}
