dayjs插件处理相对时间


处理相对时间

推荐两个第三方库：

  • Moment.js
  • 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 大小的微型库
  • ?? 全浏览器兼容

1、安装

1
npm i dayjs

2、创建 utils/dayjs.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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().to(dayjs(value))
})

3、在 main.js 中加载初始化

1
import './utils/dayjs'

4、使用

使用过滤器：

1
<p>{{ 日期数据 | relativeTime }}</p>