vue将接口返回的日期实时转换为几分钟前、几小时前、几天前

项目开发中，各种需求都会遇到，有些需求很合理，也好实现，有些需求不能说不合理，就是太麻烦，就比如类似标题所描述这种的需求，你不能说它是不合理的需求，因为很多论坛或微博、朋友圈、QQ空间之类的这种效果还是很常见的，能让我们一眼就看到这些信息是什么时候发的，而且这些时间基本都是实时自动更新的，给人的感觉很友好。

而在我们公司的后台管理项目中，恰好也有这样的需求，感觉很时髦、很潮流，所以在我们前端开发的时候，我就顺便把这样的效果给做了出来。后来在和写接口的同事开会对字段的时候，写接口的同事说这个功能他们来做，而且他们已经费劲八叉的给实现了，于是就出现了前端也费劲八叉的给实现后与接口冲突的戏剧效果，接着大家就哈哈大笑。会议在热烈、友好、祥和的氛围中圆满结束，会议还就双方共同关心的问题深入交换了意见，达成了“一致开发、协同合作”的初步意向，与会的同事有前端开发人员、接口开发人员、测试人员。

说了那么多，装了那么多的逼，都不如贴出代码来的实际。

time.js

import Vue from 'vue'

/**
 * 实时时间转换指令，大于一个月则返回具体的年月日
 * @param { string } timeStamp - 时间 格式：年-月-日 时:分:秒 或 时间戳
 * @returns { string }
 */
function getFormatTime(timeStamp){
    var dateTime = new Date(timeStamp);
    var no1new = dateTime.valueOf();
    var year = dateTime.getFullYear();
    var month = dateTime.getMonth() + 1;
    var day = dateTime.getDate();
    var hour = dateTime.getHours();
    var minute = dateTime.getMinutes();
    var second = dateTime.getSeconds();
    var now = new Date();
    var now_new = now.valueOf();
    var milliseconds = 0;
    var timeSpanStr;

    milliseconds = now_new - no1new;

    if (milliseconds <= 1000 * 60 * 1) {
        timeSpanStr = '刚刚';
    }else if (1000 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60) {
        timeSpanStr = Math.round((milliseconds / (1000 * 60))) + '分钟前';
    }else if (1000 * 60 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60 * 24) {
        timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60)) + '小时前';
    }else if (1000 * 60 * 60 * 24 < milliseconds && milliseconds <= 1000 * 60 * 60 * 24 * 15) {
        timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60 * 24)) + '天前';
    }else if (milliseconds > 1000 * 60 * 60 * 24 * 15 && year == now.getFullYear()) {
        // timeSpanStr = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
        timeSpanStr = year + '-' + month + '-' + day
    }else {
        // timeSpanStr = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
        timeSpanStr = year + '-' + month + '-' + day
    }
    
    return timeSpanStr;
    }

Vue.directive('time', {
    bind: function(el, binding){
        el.innerHTML = getFormatTime(binding.value);
        //每隔一分钟更新一次
        el.__timeout__ = setInterval(function(){
            el.innerHTML = getFormatTime(binding.value);
        }, 60000);
    },
    unbind: function(el){
        clearInterval(el.__timeout__);
        delete el.__timeout__;
    }
});

使用方法：

<template>
    <p v-time="timeNow"></p>
</template>

<script>
import './time.js'

export default {
  data(){
    return {
      timeNow: 1571111617
    }
  }
}
</script>

从代码中，我们可以看到，这是将代码封装成了一个指令，且加入“每隔一分钟更新一次”的功能，也就是说每分钟都会更新一下信息的发布时间距离当前时间的时间差。

该指令会实时将信息发布的时间转换成几分钟前、几小时前、几天前，但是超过一个月的，就展示的是信息发布时的带有日期格式的日期了。