微信小程序快捷开发_浅谈在Vue.js中怎么完成时间

摘要: 探讨在Vue.js中怎样完成時间变换命令 本文关键详细介绍了探讨在Vue.js中怎样完成時间变换命令,网编感觉挺好的,如今共享给大伙儿,也给大伙儿做下参照。一起追随网编回来看...

浅谈在Vue.js中如何实现时间转换指令       这篇文章主要介绍了浅谈在Vue.js中如何实现时间转换指令,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

服务端存储的时间格式,一般为 Unix 时间戳,比如 2019/1/6 的Unix 时间戳为 51。前端在获取到这个时间戳之后,会转换为可读格式的时间。在社交类产品中,一般会将时间戳转换为 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 : div v-relative-time="00" /div p /p 
 2019/1/6 : div v-relative-time="00" /div p /p 
 2019/1/5 : div v-relative-time="before" /div p /p 
 2019/1/1 : div v-relative-time="00" /div p /p 
 2018/1/6 : div v-relative-time="00" /div 
 /div 

script src="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: pensateZero, 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 = pensateZero(dateObj.getMonth() + 1);
 var day = pensateZero(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()

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 before: 00 });

在相对时间指令中,我们在 bind() 中,把指令中的入参转换为相对时间,然后写入指令所在的元素中,接着还定义了一个每分钟更新元素内容的定时器。在 unbind() 中,执行清除定时器操作。

渲染结果:

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

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


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




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:如何自己创建网站