一、需求分析

需求：将标准时间转换成相对时间。如：将 2022-04-07 转换成 1 天前。怎么办？

分析：相对时间处理是一个非常通用的功能，在 dayjs 中有现成的解决方案，我们一起来观摩观摩。

二、实现步骤

下包

yarn add dayjs 或 npm i dayjs

引入dayjs

import dayjs from 'dayjs'

引入插件

import _relativeTime from 'dayjs/plugin/relativeTime'

dayjs.extend(插件)

dayjs.extend(_relativeTime)

调用插件中特有的功能（测试）

console.log( dayjs('2022-09-14').fromNow() )

dayjs的国际化

import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')

局部使用

import dayjs from 'dayjs'
import _relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'
dayjs.extend(_relativeTime)
dayjs.locale('zh-cn')
// 省略其他
<span>{dayjs('2022-09-14').fromNow()}</span>

封装成工具函数（全局可使用）

import dayjs from 'dayjs'
import _relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'
dayjs.extend(_relativeTime)
dayjs.locale('zh-cn')
export const relativeTime = (strDate: string) => {
  return dayjs(strDate).fromNow()
}

全局导入使用

import { relativeTime } from '@/utils/relativeTime'
// 省略其他。。。
<span>{relativeTime('2022-09-14')}</span>

dayjs 如何实现相对时间

一、需求分析

二、实现步骤