大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

说说在 Vue.js 中,如何实现时间转换指令

在社区中,发布的动态信息,经常会有一个相对余实际发布时间的相对时间。比如这里的微博:

服务端存储的时间格式,一般为 Unix 时间戳,比如 2019/1/6 13:40:1 的Unix 时间戳为 1546753201651。前端在获取到这个时间戳之后,会转换为可读格式的时间。在社交类产品中,一般会将时间戳转换为 x 分钟前,x 小时前或者 x 天前,因为这样的显示方式用户体验更好。

我们可以自定义一个 v-relative-time 指令来实现上述功能。

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>
</head>
<body>

    <div id="app" v-cloak>
        现在时间:<div v-relative-time="now"></div><p></p>
        2019/1/6 13:45:02:<div v-relative-time="1546753502000"></div><p></p>
        2019/1/6 8:02:02:<div v-relative-time="1546732922000"></div><p></p>
        2019/1/5 22:02:02:<div v-relative-time="before"></div><p></p>
        2019/1/1 22:02:02:<div v-relative-time="1546351322000"></div><p></p>
        2018/1/6 8:02:02:<div v-relative-time="1515196922000"></div>
    </div>


<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="index.js"></script>
</body>
</html>

注意: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 分钟之前,返回“刚刚”
  2. 如果是 1 分钟到 1 小时之间,返回“xx 分钟前”
  3. 如果是 1 小时到 1 天之间,返回“xx 小时前”
  4. 如果是 1 天到 1 个月(假设固定为 31 天)之间,返回“xx 天前”
  5. 如果是大于 1 个月,返回“xx 年 xx 月 xx 日”

我们专门设计了一个 Time 对象,用于定义与时间相关的函数:

  1. 获取当前 Unix 时间戳。
  2. 获取今日 0 点 0 分 0 秒的 Unix 时间戳。
  3. 获取今年 1 月 1 日 0 点 0 分 0 秒的 Unix 时间戳。
  4. 格式化日期函数,输出格式为 xxxx-xx-xx。
  5. 如果值小于 10,那么在前面补一个零的格式化函数。
  6. 转换为相对时间。

以下是与时间相关的小知识:

  1. JavaScript 的时间是由世界标准时间( UTC ) 1970 年 1 月 1 日开始,用毫秒计时,一天由 86,400,000 毫秒组成 。
  2. Math.floor() 返回小于或等于一个给定数字的最大整数,即向下取整。
  3. 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() 中,执行清除定时器操作。

渲染结果:



编写自定义指令,建议如下:

  1. 在 bind() 中定义初始化操作,比如绑定一次性事件。
  2. 在 unbind() 中定义解绑与删除操作。
  3. 虽然可以在自定义指令中任意操作 DOM,但这就不是数据驱动 DOM 啦,所以遇到这样的场景,建议使用组件来满足业务要求。

本文示例代码