前言
作为前端开发者，可能经常需要实现时间戳转换为某种格式时间的需求，特别是在社交类或者博客类网站上，时间显示方式更是需要考虑用户体验。除此之外，由于全球化的发展，可能需要把时间转换成多种语言，比如英语、中文、法语等。因此，这个时候就需要使用一些好用的时间格式化工具。今天，我们要介绍一款 npm 包叫做 vue-timeago，用它可以轻松实现时间格式化。下面，我们就具体来看看如何使用这个包。
安装
首先需要确保你的项目已经使用了 vue 框架，然后可以通过 npm 来安装 vue-timeago 包，命令如下：
--- ------- ----------- ------
快速使用
安装好之后，可以在需要使用的组件中引入 vue-timeago：
--------
------ --- ---- -----
------ ---------- ---- -------------
------------------- -
----- ---------- -- --------- ----- --------- -- -------
------- -------- -- ------- ------
-------- -
-------- ---------------------------------
-------- -----------------------------
-
--
---------引入之后，就可以在组件中使用 timeago 进行时间转换了：
----------
----- ---------- - ------- ------
-----------
--------
------ ------- -
------ -
------ -
----------- --------------------------
-
-
-
---------在这个示例中，我们给定了一个时间字符串代表 2022 年 1 月 1 日 00:00:00，然后使用管道符号调用了 vue-timeago，将这个时间转换为一个更友好的显示方式。
样式定制
默认情况下，vue-timeago 会根据时间距离当前时间不同而选择不同的样式进行展示，比如一个时间是 3 天前的可能是灰色的，而一小时前的可能是蓝色的。这些样式可以在 vue-timeago 包中的源码中找到，可以直接在项目中的 CSS 文件中复制这段样式并进行修改。下面是一个例子：
-------- - ------ ----- - ----------------- - -------------- --- ------ ----- - -------------- - ---------- ------ ------ ----- - ------------------------------- ----------------------------- - -------- ----- - ---------------------------- - ------------- ------ - ---------------------------- - -------- ------ ------------ ---- - ----------------------------- - -------- ------ ------------ ---- - ---------------------------- - -------- ------ ------------ ---- -
高级使用
在高级使用中，我们可以定制化时间显示的格式、动态修改区域显示，同时也支持多语言。
定制化时间显示格式
在大部分情况下，使用 vue-timeago 的默认格式化规则就能够达到我们使用的效果。例如，它会在默认情况下自动地把 "1 天前" 和 "昨天" 等格式化输出。不过，在某些情况下，我们可能需要定制化时间格式。这个时候，vue-timeago 提供了一个 format 属性，可以使用 date-fns 库中的时间格式化函数来进行定制化的时间格式化。
比如，我们可以这样使用：
----------
----- ---------- - ------------- - ------- ------------ -- ------
-----------
--------
------ ------- -
------ -
------ -
----------- --------------------------
-
-
-
---------在这个例子中，我们使用了 date-fns 中的 'YYYY-MM-DD' 格式化字符串，输出的时间格式化之后会是类似 2022-01-01 的形式。
动态修改区域显示
在某些网站应用中，用户的位置可能是动态的，这个时候我们需要动态更新显示的语言。vue-timeago 可以通过从属性中读取当前语言来进行显示，属性中的语言可以是编码（例如 zh-CN 或 en-US），也可以是一个对象。
例如：
----------
---
-- ----------- - ------------------ --
-- ----------- - ------------------ --
----
-----------
--------
------ ------- -
------ -
------ -
------------ ---------------------------
------------ ---------------------------
---------- --------
---------- -
------- ------------------------------
---------- ------ ------- - --------- -- -- -
----- -------- - -------------------- --- ------- - ---------- ------ --
------ -------------------------------- - -----------------
-
--
-
-
-
---------在这个例子中，我们同时渲染了两个日期，其中一个的语言是中文（zh-CN），另一个则是英文（en-US）。在 localeTwo 属性中，我们引用了 date-fns 的英文本地化模块，然后对其 formatter 属性进行了修改，控制其在格式化时间时加上 "ago" 这个后缀，并把日期中的首字母变成了大写。这个时候，时间戳转化之后就会变成 "A day ago" 的形式。
实现多语言
除了直接从属性中读取之外，vue-timeago 还支持将多种语言预先设置好。对于时间转换器来说这是一件非常必要的事情，因为人们通常会跨地区使用多套语言进行交流。
首先，需要在 Vue 实例的 data 选项中设置一个叫做 locales 的属性，它的值是一个对象。每个键（如 zh-CN，en-US 等）都代表一种语言，其值是包含这种语言所需本地化信息的对象。
然后，还需要注意要将 locales 传递给 Vue.use()，如下所示：
------ --- ---- -----
------ ---------- ---- -------------
------------------- -
----- ----------
-------- -
-------- ---------------------------------
-------- -----------------------------
-
--这样，我们就可以在组件中根据需要使用相应的语言，例如：
----------
----- ----------- - ---------------- ------
----- ----------- - ---------------- ------
-----------
--------
------ ------- -
------ -
------ -
------------ ---------------------------
------------ --------------------------
-
-
-
---------总结
通过本篇文章，我们详细学习了如何使用 vue-timeago，解决了时间格式化和多语言的问题。同时我们介绍了快速使用、样式定制和高级用法。具体使用时，可以根据自己的需求进行选择。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f16a78b403f2923b035c385