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、安装

npm i dayjs

2、创建 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().to(dayjs(value))
})

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

import './utils/dayjs'

4、使用

使用过滤器：

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