前言

为了显示出实时性，在一些社交类产品中，比如WX朋友圈或微博等地方，作者发布动态的时间会实时显示为“ 刚刚”、“ 1小时前”、“ 1天前” 等不同的格式。也就是一个相对本机时间转换后的相对时间。这样比直接转换为年、月、日、时、分、秒更友好。本文记录了实现这样一个 自定义指令 v-time 的详细过程。

1. 新建html、index.js文件

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>时间转换指令</title>
</head><body><div id="app"><div v-time="timeNow"></div><div v-time="timeBefore"></div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="./time.js"></script><script src="./index.js"></script>
</body>
</html>

index.js

var app =new Vue({el :'#app',data : {// 当前时间戮（1970/01/01 至今的毫秒数）timeNow: (new Date()).getTime(),// (下面这个时间戳是毫秒级的，如服务端返回的秒级时间戳，则需要乘以1000)timeBefore: 1488930695721}
}) ;

timeNow 是目前的时间， timeBefore 是一个写死的时间： 2017-03-08 。

2. 时间转换逻辑

1 分钟以前，显示 “刚刚”。
1 分钟～1 小时之间 ==> 显示 “xx 分钟前”；
1 小时～1 天之间 ==> 显示 “xx 小时前”；
1 天～1 个月（31天）之间 ==> 显示 “xx 天前” ；
大于 1 个月 ==> 显示 “xx 年xx 月xx 曰”

3. 新建 time.js 文件

为了使判断逻辑更简单，统一使用时间戳进行大小判断。

在写指令v-time之前，需要先准备好与时间相关的函数，我们声明一个对象Time ，把它们都封装在里面。

封装Time对象

var Time = {// 获取当前时间戳getUnix: function() {var date = new Date();return date.getTime();},// 获取今天 0 点 0 分 0 秒的时间戳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 秒的时间戮getYearUnix: function() {var date = new Date();date.setMonth(0);date.setDate(1);date.setHours(0);date.setSeconds(0);date.setMilliseconds(0);return date.getTime();},// 获取标准年月日getLastDate: function(time) {var date = new Date(time);var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;var day = date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate();return date.getFullYear() + '-' + month + '-' + day;},// 转换时间    // 自定义指令 v-time 所需的，入参为毫秒级时间戳getFormatTime: function(timestamp) {var now = this.getUnix(); // 当前时间戮var today = this.getTodayUnix(); // 当天 0 点时间戮var year = this.getYearUnix(); // 当年 0 点时间戮var timer = (now - timestamp) / 1000; // 转换为秒级时间戮var tip = '';if (timer <= 0) {tip = '刚刚';} else if (Math.floor(timer / 60) <= 0) {tip = '刚刚';} else if (timer < 3600) {tip = Math.floor(timer / 60) + '分钟前'} else if (timer >= 3600 && (timestamp - today >= 0)) {tip = Math.floor(timer / 3600) + '小时前';} else if (timer / 86400 <= 31) {tip = Math.ceil(timer / 86400) + '天前';} else {tip = this.getLastDate(timestamp);}// 返回己整理好时间格式的字符串。return tip;}
}

其中，getFormatTime() 方法就是自定义指令v-time所需要的、入参为毫秒级时间戳，该方法返回己整理好时间格式的字符串。

关于 JavaScript 的 Date 类型，详情请参阅 >> MDN官方文档。

. 指令的注册

指令跟组件一样需要注册才能使用，同样有两种方式，全局注册和局部注册。

1）全局注册

Vue.directive('dirName',function(){//定义指令
});

2）局部注册

new Vue({ directives:{ dirName:{//定义指令 }}
});

3）v-time自定义指令注册

本实例用全局注册方式

Vue.directive('time', { bind: function(el, binding) {   el.innerHTML = Time.getFormatTime(binding.value);  // 定时器 el.__timeout__ 每分钟触发一次，更新时间el.__timeout__ = setInterval(function() { // 将格式化时间写入指令所在元素el.innerHTML = Time.getFormatTime(binding.value);}, 60000); // 注意这里的60000是毫秒},unbind: function(el) {// 在 unbind 钩子里清除定时器。clearInterval(el.__timeout__);delete el.__timeout__;}
})

在bind钩子里，将指令v-time表达式的值binding.value作为参数传入Time.getFormatTime()方法得到格式化时间，再通过el.innerHTML写入指令所在元素。定时器el. timeout每分钟触发一次，更新时间，并且在unbind钩子里清除掉。

4 总结

在编写 自定义指令 时，给 DOM 绑定一次性事件等初始动作，建议在 bind 钩子内完成，同时要在unbind 内解除相关绑定。在自定义指令里，理论上可以任意操作 DOM，但这又违背 Vue.js 的初衷，所以对于大幅度的 DOM 变动，应使用组件。

【补充】：本例所用的时间戮都是毫秒级的，如服务端返回秒级时间戳，需要乘以 1000 后再使用。

Vue自定义指令-实时时间转换指令 v-time开发相关推荐

[vue-demo]实时时间转换指令 v-time
time.js文件 var Time = { // 获取当前时间戳 getUnix: function () { var d ...
图片懒加载及Vue自定义图片懒加载指令
文章目录监听滚动的方式 IntersectionObserver方式自定义图片懒加载vue指令1 自定义图片懒加载vue指令2 lazyLoadImage.js main.js中注册指令组件中使 ...
[vue-demo]实时时间转换 v-time
创建一个time.js文件: 内容如下 var Time = { // 获取当前时间戳 getUnix: function () { ...
自定义标签 —— 实现时间转换和输出功能
第一步:导入jar包 jsp-api-2.2-sources.jar <!-- https://mvnrepository.com/artifact/javax.servlet.jsp/jsp ...
Linux 用户管理文件目录指令时间日期指令搜索查找类解压压缩类
目录用户管理添加用户: 指定/修改密码删除用户查询用户信息指令切换用户查看当前用户/登录用户用户组修改用户的组用户和组相关文件指定运行级别1 指定运行级别2 找回root密码帮助 ...
道一时间转换工具发布
道一时间转换工具发布在开发时候,经常会进行时间戳转换,"无聊至极"就开发了一个专业时间转换工具,软件简洁实用,此工具为绿色,下载直接使用. 软件界面下载页面 https:/ ...
vue自定义日历小组件
vue自定义小日历组件一.前言自己开发的项目需要用到类似博客侧边栏小日历组件,觉得自己造一个比较随心所欲,更能满足自己的需求,所以决定自己开发一个.最终效果如图所示. 二.日历样式我的这个日历组 ...
Vue的自定义指令以及Vue自定义指令的应用场景
前言一.Vue的自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令.有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令. 自定义指令分为全局自定义指令和局部的自 ...
vue自定义指令使用
前言一.Vue的自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令.有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令. 自定义指令分为全局自定义指令和局部的自 ...

Vue自定义指令-实时时间转换指令 v-time开发

目录

前言

1. 新建html、index.js文件

2. 时间转换逻辑

3. 新建 time.js 文件

4 总结

Vue自定义指令-实时时间转换指令 v-time开发相关推荐

最新文章

热门文章