js 搭配dayjs 获取几小时、几天前

dayjs显示格式

• 1. 安装
• 2. 引入dayjs
• 3. 如何显示 “1分钟前”、“3小时内” 格式

1. 安装

npm i dayjs

2. 引入dayjs

main.js

import dayJs from 'dayjs'
import Vue from 'vue'
Vue.prototype.dayjs = dayJs
123

如此就全局挂载了dayjs，随时可使用。

如：
***.vue

console.log('date:', this.dayjs().format('YYYY-MM-DD')); // date: 2021-12-30
1

3. 如何显示 “1分钟前”、“3小时内” 格式

修改引入代码

import dayJs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime' // +
dayJs.extend(relativeTime) // +
import Vue from 'vue'
Vue.prototype.dayjs = dayJs
12345

使用：

console.log('dayjs fromNow:', this.dayjs('2021-12-29 12:00').fromNow());
console.log('dayjs toNow:', this.dayjs('2021-12-29 12:00').toNow());
12

输出如下：

展示的默认不是中文格式的，该如何调整呢？

继续修改引入代码：

import dayJs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn' // +
dayJs.locale('zh-cn') // +
dayJs.extend(relativeTime)
import Vue from 'vue'
Vue.prototype.dayjs = dayJs
1234567

再次使用：

console.log('dayjs fromNow:', this.dayjs('2021-12-29 12:00').fromNow());
console.log('dayjs toNow:', this.dayjs('2021-12-29 12:00').toNow());
12

展示效果如下：

如此就达到了期望的效果。