处理相对时间(Day.jsMoment.js)（案例：结合vue的过滤器使用）

Posted 2021-08-05 小小白学计算机

推荐两个第三方库：

1. Moment.js
2. Day.js

两者都是专门用于处理时间的 javascript 库，功能差不多，因为 Day.js 的设计就是参考的 Moment.js。但是 Day.js 相比 Moment.js 的包体积要更小一些，因为它采用了插件化的处理方式。

Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样，如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js 。

Day.js 可以运行在浏览器和 Node.js 中。
🕒 和 Moment.js 相同的 API 和用法
💪 不可变数据 (Immutable)
🔥 支持链式操作 (Chainable)
🌐 国际化 I18n
📦 仅 2kb 大小的微型库
👫 全浏览器兼容

下面是具体的操作流程。

Dayjs官方文档

安装 dayjs：

npm install dayjs --save

创建封装 utils/dayjs.js：

import Vue from 'vue'
import dayjs from 'dayjs'

// 加载中文语言包
import 'dayjs/locale/zh-cn'

import relativeTime from 'dayjs/plugin/relativeTime'

// 配置使用处理相对时间的插件
dayjs.extend(relativeTime)

// 配置使用中文语言包
dayjs.locale('zh-cn')

// 全局过滤器：处理相对时间
Vue.filter('relativeTime', value => {
  return dayjs().from(dayjs(value))
})

在 main.js 中加载初始化：

import './utils/dayjs'

使用过滤器：

<span>{{ article.pubdate | relativeTime }}</span>

案例：结合vue的过滤器使用