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节点中使用这个函数:
在这里插入图片描述
可以看看效果:
在这里插入图片描述

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

BBC蟹耳总

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值