重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
浅谈在Vue.js中如何实现时间转换指令
在社区中，发布的动态信息，经常会有一个相对余实际发布时间的相对时间。比如这里的微博：
成都创新互联公司专注于企业成都全网营销推广、网站重做改版、樟树网站定制设计、自适应品牌网站建设、HTML5建站、商城网站制作、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为樟树等各大城市提供网站开发制作服务。
服务端存储的时间格式，一般为 Unix 时间戳，比如 2019/1/6 13:40:1 的Unix 时间戳为 1546753201651。前端在获取到这个时间戳之后，会转换为可读格式的时间。在社交类产品中，一般会将时间戳转换为 x 分钟前，x 小时前或者 x 天前，因为这样的显示方式用户体验更好。
我们可以自定义一个 v-relative-time 指令来实现上述功能。
html：
Title 现在时间： 2019/1/6 13:45:02: 2019/1/6 8:02:02: 2019/1/5 22:02:02: 2019/1/1 22:02:02: 2018/1/6 8:02:02:
注意：div v-relative-time 指令的入参为精确到毫秒的 Unix 时间戳，如果入参单位为秒，那么可以乘以 1000 后，再传入。
js：
/**
* 时间对象
* @type {{getCurrentUnix: Time.getCurrentUnix, getTodayUnix: Time.getTodayUnix, getThisYearUnix: Time.getThisYearUnix, format: Time.format, compensateZero: Time.compensateZero, transform: Time.transform}}
*/
var Time = {
//获取当前 Unix 时间戳
getCurrentUnix: function () {
return new Date().getTime();
},
//获取今日 0 点 0 分 0 秒的 Unix 时间戳
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 秒的 Unix 时间戳
getThisYearUnix: 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();
},
//格式化日期；输出格式为 xxxx-xx-xx
format: function (val) {
var dateObj = new Date(val);
//month 代表月份的整数值从0（1月）到11（12月），所以需要转换
var month = this.compensateZero(dateObj.getMonth() + 1);
var day = this.compensateZero(dateObj.getDate());
return dateObj.getFullYear() + '-' + month + '-' + day;
},
/**
* 如果值小于 10，那么在前面补一个零
* @param val
* @returns {*}
*/
compensateZero: function (val) {
if (typeof val == 'number') {
return val < 10 ? '0' + val : val;
} else {
return val;
}
},
/**
* 转换为相对时间
*
* 1 分钟之前，返回“刚刚”
* 1 分钟到 1 小时之间，返回“xx 分钟前”
* 1 小时到 1 天之间，返回“xx 小时前”
* 1 天到 1 个月（假设固定为 31 天）之间，返回“xx 天前”
* 大于 1 个月，返回“xx 年 xx 月 xx 日”
* @param val unix 时间戳
*/
transform: function (val) {
//计算时间间隔（单位：s）
console.log("getCurrentUnix:" + this.getCurrentUnix());
var interval = (this.getCurrentUnix() - val) / 1000;
if (Math.floor(interval / 60) <= 0) {//1 分钟之前
return '刚刚';
} else if (interval < 3600) {//1 分钟到 1 小时之间
return Math.floor(interval / 60) + ' 分钟前';
} else if (interval >= 3600 && (val - this.getTodayUnix() >= 0)) {//1 小时到 1 天之间
return Math.floor(interval / 3600) + ' 小时前';
} else if (interval / (3600 * 24) <= 31) {//1 天到 1 个月（假设固定为 31 天）之间
return Math.ceil(interval / (3600 * 24)) + ' 天前';
} else {
return this.format(val);
}
}
};时间转换逻辑为：
- 如果是 1 分钟之前，返回“刚刚”
- 如果是 1 分钟到 1 小时之间，返回“xx 分钟前”
- 如果是 1 小时到 1 天之间，返回“xx 小时前”
- 如果是 1 天到 1 个月（假设固定为 31 天）之间，返回“xx 天前”
- 如果是大于 1 个月，返回“xx 年 xx 月 xx 日”
我们专门设计了一个 Time 对象，用于定义与时间相关的函数：
- 获取当前 Unix 时间戳。
- 获取今日 0 点 0 分 0 秒的 Unix 时间戳。
- 获取今年 1 月 1 日 0 点 0 分 0 秒的 Unix 时间戳。
- 格式化日期函数，输出格式为 xxxx-xx-xx。
- 如果值小于 10，那么在前面补一个零的格式化函数。
- 转换为相对时间。
以下是与时间相关的小知识：
Math.floor() Math.ceil()
/**
* 相对时间指令
*/
Vue.directive('relative-time', {
bind: function (el, binding) {
el.innerHTML = Time.transform(binding.value);
el._relativeTime = setInterval(function () {
el.innerHTML = Time.transform(binding.value);
}, 60000);//每分钟，刷新一次
},
unbind: function (el) {
clearInterval(el._relativeTime);
delete el._relativeTime;
}
});
var app = new Vue({
el: '#app',
data: {
now: (new Date()).getTime(),
//2019/1/5 22:02:02
before: 1546696922000
}
});在相对时间指令中，我们在 bind() 中，把指令中的入参转换为相对时间，然后写入指令所在的元素中，接着还定义了一个每分钟更新元素内容的定时器。在 unbind() 中，执行清除定时器操作。
渲染结果：
编写自定义指令，建议如下：
- 在 bind() 中定义初始化操作，比如绑定一次性事件。
- 在 unbind() 中定义解绑与删除操作。
- 虽然可以在自定义指令中任意操作 DOM，但这就不是数据驱动 DOM 啦，所以遇到这样的场景，建议使用组件来满足业务要求。
本文示例代码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
文章题目：浅谈在Vue.js中如何实现时间转换指令
文章地址：http://cqcxhl.cn/article/jjojdj.html