Vue3格式化时间、相对当前时间（前）

今天搬砖的过程中，需要把后端返回的时间戳格式化成“几分钟前”、“几小时前”、“几天前”……这样子的字符。这里记录一下搬砖的过程。

1. 不考虑自己手写，直接使用 day.js 库，一步步跟着官方文档操作即可，我这里使用的是：

import dayjs from 'dayjs'

（官方文档的截图）

2. 相对当前时间格式化的功能，依赖 RelativeTime 插件，那么需要注入下插件。另外默认返回的字符会是英文的，我们顺便处理下本地化语言，写在下面了：

import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'
// 扩展功能插件
dayjs.extend(relativeTime)
// 本地化语言
dayjs.locale('zh-cn')
// 拿来就用
dayjs('1999-01-01').fromNow() // 22 年前

3. 使用过程发现了一个待优化的问题点，day.js 返回的字符存在空格，例如 "22 年前"、“2 分钟前”……我这里的需求是去掉空格，所以写了下面这段代码：

let str = dayjs('1999-01-01').fromNow()  // 22 年前
let newStr = str.replace(/\s/g, '')  // 22年前

4. 最后提供下完整的模块代码：

import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import relativeTime from 'dayjs/plugin/relativeTime'// 扩展功能插件
dayjs.extend(relativeTime)
// 本地化语言
dayjs.locale('zh-cn')// 对外抛出格式化时间的方法
export const formatTime = (t: string) => {let str = dayjs(t).fromNow()let newStr = str.replace(/\s/g, '')return newStr
}

Vue3格式化时间、相对当前时间（前）相关推荐

【vue 项目】格式化时间、获取当前时间、一小时前时间、一天前时间
接口请求参数需要传递时间下面有三种方式获取当前时间第一种格式是最常见,采用三元判断添加0 created() {this.getCurrentTime()},methods: {getCurre ...
Java-小技巧-004-jdk时间，jdk8时间，joda，calendar，获取当前时间前一周、前一月、前一年的时间...
1.推荐使用java8 localdate等线程安全支持较好地址 2.joda 一.简述查看SampleDateFormat源码,叙述有: * Date formats are not syn ...
网游服务端php5.1时间戳格式化,php格式化时间戳显示友好时间的简单示例
这篇文章主要为大家详细介绍了php格式化时间戳显示友好时间的简单示例,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小玲来看看吧! 在项目中时间一律显示为2014-1 ...
Java代码格式化算法_一个时间格式化的工具类：TimeUtil
源代码如下: import android.content.Context; import android.text.TextUtils; import android.text.format.Dat ...
vue3+ts实现视频根据时间轴截取，并可以通过传入截取起止时间进行当前剪辑的回显
公司提出想做一个视频编辑功能,每次只裁剪一段即可,UI同时也想实现时间轴为关键帧图片的效果,从网上也没找到合适的组件,简单思考后觉得并不难,决定自己封装一个吧.组件涉及到的只有vue3+ts+scss ...
java 表达式日期加减_jdk8获取当前时间|时间加减|java8时间格式化|时间处理工具|时间比较|线程安全的时间处理方法...
目录前言在很久之前,我总结了一些jdk7版本之前的关于时间处理的一些公共方法,日期转换成字符串.指定时间加上指定天数后的日期.获取上周周一时间等等:具体的可以戳链接查看完整的:https://b ...
Java中时间格式化（获取指定时间）
Java中时间格式化(获取指定时间,七天前) 1.通过获取当前系统时间,格式化后转为"yyyy-MM-dd HH:mm:ss"格式并输出: 2.可获取指定时间,如七天前,一年前等, ...
uniapp 处理过去时间对比现在时间的时间差如刚刚、几分钟前，几小时前，几个月前
文章目录 1. 返回的报文 2. 时间格式化方法 3. 使用 1. 返回的报文格式化时间:createTime [{"id": "62c11d3435b7c4007a8 ...
Java格式化日期用斜杠_[java工具类01]__构建格式化输出日期和时间的工具类
在之前的学习中,我写过一篇关于字符串格式化的,就主要设计到了时间以及日期的各种格式化显示的设置,其主要时通过String类的fomat()方法实现的. 我们可以通过使用不同的转换符来实现格式化显示不同 ...
java获取mysql时间格式化_Java与mysql的时间格式化问题，获取时间的上下午
Java与mysql的时间格式化问题,获取时间的上下午java 在项目中常常会遇到对时间进行格式化的问题,一次在对应用中发现,使用Java的SimpleDateFormat格式化时间,获取到的是上午, ...

Vue3格式化时间、相对当前时间（前）

Vue3格式化时间、相对当前时间（前）相关推荐

最新文章

热门文章