首页 / VUE / 浅谈在Vue.js中如何实现时间转换指令

浅谈在Vue.js中如何实现时间转换指令

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了浅谈在Vue.js中如何实现时间转换指令，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4746字，纯文字阅读大概需要7分钟。

内容图文

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

浅谈在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. 转换为相对时间。

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

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() 中，执行清除定时器操作。

渲染结果：

浅谈在Vue.js中如何实现时间转换指令 - 文章图片

编写自定义指令，建议如下：

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

本文示例代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的浅谈在Vue.js中如何实现时间转换指令全部内容，希望文章能够帮你解决浅谈在Vue.js中如何实现时间转换指令所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/333597.html

来源：【匿名】