1. 安装

npm i dayjs

2. 引入dayjs

main.js

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

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

如:
***.vue

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

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

修改引入代码

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

使用:

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

输出如下:
在这里插入图片描述
展示的默认不是中文格式的,该如何调整呢?

继续修改引入代码:

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

再次使用:

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

展示效果如下:
在这里插入图片描述
如此就达到了期望的效果。

Logo

前往低代码交流专区

更多推荐