vue项目中利用dayjs来改变推送时间的显示样式

背景交代

我们拿到的后台的推送时间的数据是这样的：

但是我们需要在页面中显示比如1分钟前，1小时前类似这种效果，第一反应是自己写函数，获取当前时间戳，再把推送时间转换为时间戳，然后相减，取模相除然后去规定区间，然而这样的方法比较麻烦。请教了导师之后，给dayjs或者moment.js两款插件，其实两款差不多，我选择用dayjs，需要的功能已经帮你封装好了，资源和教程在npm中搜就能得到：dayjs资源

按照教程安装好之后，我们需要导入dayjs

// dayjs插件
import dayjs from 'dayjs';

导入之后，我们查看官网教程，点击显示 查看Time from now，这就是我们想要的功能：

使用这个功能需要配置RelativeTime插件，那我们就导入该模块：

import RelativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(RelativeTime);

RelativeTime提供了四个API：

接下来是配置显示的效果和区间，这里需要导入UpdateLocale模块：

import UpdateLocale from 'dayjs/plugin/updateLocale';
dayjs.extend(UpdateLocale);

这是默认效果：

我们对配置代码进行修改：

dayjs.updateLocale('en', {
        relativeTime: {
          future: 'in%s',
          past: '%s前',
          s: '秒',
          m: '1分钟',
          mm: '%d分钟',
          h: '1小时',
          hh: '%d小时',
          d: '一天',
          dd: '%d天',
          M: '一个月',
          MM: '%d月',
          y: '一年',
          yy: '%d年',

写一个函数去改变推送时间的显示效果：

initdayjs(date) {
      dayjs.updateLocale('en', {
        relativeTime: {
          future: 'in%s',
          past: '%s前',
          s: '秒',
          m: '1分钟',
          mm: '%d分钟',
          h: '1小时',
          hh: '%d小时',
          d: '一天',
          dd: '%d天',
          M: '一个月',
          MM: '%d月',
          y: '一年',
          yy: '%d年',
        },
      });
      const pushDate = dayjs(date).fromNow();
      return pushDate;
    },

然后我们在DOM节点中使用这个函数：

可以看看效果：