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

2024-10-23 14:04:53

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

服务端存储的时间格式，一般为 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 分钟到 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 时间转换代码及时间戳转时间字符串

Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), //minute "s+" : this.getSeconds()
vue.js将unix时间戳转换为自定义时间格式

本方法通过vue.js filter实现将unix时间戳转换为自定义标准时间格式  $().ready(function() {  Vue.filter('time',   function(value) { var date = new Dat
浅谈在Vue.js中如何实现时间转换指令

在社区中,发布的动态信息,经常会有一个相对余实际发布时间的相对时间.比如这里的微博: 服务端存储的时间格式,一般为 Unix 时间戳,比如 2019/1/6 13:40:1 的Unix 时间戳为 1546753201651.前端在获取到这个时间戳之后,会转换为可读格式的时间.在社交类产品中,一般会将时间戳转换为 x 分钟前,x 小时前或者 x 天前,因为这样的显示方式用户体验更好. 我们可以自定义一个 v-relative-time 指令来实现上述功能. html: <!DOCTYPE html
浅谈php和js中json的编码和解码

php中 1)编码 $jsonStr = json_encode($array) 2)解码 $arr = json_decode($jsonStr) <?php echo json_encode("中文", JSON_UNESCAPED_UNICODE); 添加参数:JSON_UNESCAPED_UNICODE即可. 测试环境: PHP Version 5.5.36 js中 1. 编码 var str = obj.toJSONString();//需要JSON解析器或工具类
深入浅析Vue.js 中的 v-for 列表渲染指令

1 基本用法当遍历一个数组或枚举一个对象进行迭代循环展示时,就会用到列表渲染指令 v-for. 它的表达式需要结合 in 来使用,类似 item in items 的形式. 1.1 遍历数组 html: <div id="app"> <ul> <li v-for="n in news">{{n.title}}</li> </ul> </div> js: <script> var a
使用Vue开发一个实时性时间转换指令

前言最近有一个说法,如果你看见某个网站的某个功能,你就大概能猜出背后的业务逻辑是怎么样的,以及你能动手开发一个一毛一样的功能,那么你的前端技能算是进阶中高级水平了.比如咱们今天要聊的这个话题:如何用Vue开发一个实时性的时间转换指令? 接下来正文从这开始~ 如上图所示(我是截取的某技术社区首页的部分页面),大家看到用红色边框勾选中的时间文字了吧.很多网站发布动态的时候,都会有一个相对本机时间转换后的相对时间.那你知道这个功能实现的背后原理是什么吗?如果有兴趣的,请备好瓜子,茶水,继续往下读.
浅谈在vue项目中如何定义全局变量和全局函数

写在前面: 如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数,这两个设置不太难,而且有一些共通之处,可能有一些朋友对此不太了解,所以随便写出来分享一波.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. 定义全局变量原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vu
浅谈基于Vue.js的移动组件库cube-ui

cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,虽然组件还不是很多,但是基本场景是够用了,感谢开源! 首先创建一个vue项目 vue init webpack my-project cd my-project npm install 安装cube-ui npm install cube-ui -S 官方推荐使用 babel-plugin-transform-modules 插件,可以更优雅引入组件模块以及对应的样式. npm install babel-pl
浅谈关于.vue文件中style的scoped属性

本文介绍了.vue文件中style的scoped属性以及踩到的坑,具体如下: scoped可以实现style只作用于当前的.vue文件 <template> <div class="user"></div> </template> <script> </script> <style lang='less' scoped> .user { color:#333; } </style> 上面的文
Vue.js中v-for指令的用法介绍

一.什么是v-for指令在Vue.js中,我们可以使用v-for指令基于源数据重复渲染元素.也就是说可以使用v-for指令实现遍历功能,包括遍历数组.对象.数组对象等. 二.遍历数组代码示例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&quo
浅谈Vue.js中ref ($refs)用法举例总结

本文介绍了Vue.js中ref ($refs)用法举例总结,分享给大家,具体如下: 看Vue.js文档中的ref部分,自己总结了下ref的使用方法以便后面查阅. 一.ref使用在外面的组件上 HTML 部分 <div id="ref-outside-component" v-on:click="consoleRef"> <component-father ref="outsideComponentRef"> </co
浅谈在vue中使用mint-ui swipe遇到的问题

使用步骤: 1.安装:npm install mint-ui -S 2.引入组件 // 完整引入import Vue from 'vue'; import Mint from 'mint-ui'; import "mint-ui/lib/style.css" Vue.use(Mint); // 按需引入注意:和Element-ui类似,按需引入时需要借助babel-plugin-component插件 npm install babel-plugin-component -D 修改.

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

相关推荐

随机推荐