vue return date real-time conversion interface for the first few minutes, a few hours ago, a few days ago

Project development, will encounter a variety of needs, some demand is reasonable, beating achieve some unreasonable demands can not be said, is too much trouble, like on a similar title description of this demand, you can not say that it is unreasonable demand, because many forums or microblogging, circle of friends, this effect like the QQ space is still very common, allows us to see at a glance what time the information is made, and these are basically real-time automatic updates , it feels very friendly.

In our company's background in project management, just have such a demand, I feel very fashionable, very trend, so when we front-end development, I am on the way to this effect to make out. Later in the meeting and write interface colleagues on the field when the write interface colleagues say that this feature they do, and they have been struggling to achieve a octree, so it was a front-end octree also struggling to implement the interface dramatic conflict, then everyone would laugh. The meeting ended in a warm, friendly and peaceful atmosphere, the meeting also discussed issues of common concern in-depth exchange of views and reached an "agreement to develop, collaboration," the initial intention, the participating colleagues have front-end developer, Interface developer ,Testers.

He said so much, put so much force, not as posted actual code.

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__;
    }
});

Instructions:

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

<script>
import './time.js'

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

From the code, we can see that this code is encapsulated into a command, and adding "updated once every minute" function, which means that every minute update about the release time information from the time difference between the current time.

This command will convert the real-time information dissemination time to a few minutes ago, a few hours ago, a few days ago, but more than a month, on a date with a date display format when the information was released.