发布文章/评论-时间展示

最新推荐文章于 2023-03-02 15:41:41 发布

jingyi-1994

最新推荐文章于 2023-03-02 15:41:41 发布

阅读量363

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_60375290/article/details/126139620

版权

本文介绍如何在Vue.js前端项目中利用moment.js库，展示文章和评论发表时间。具体做法包括下载安装moment，创建自定义的moment.js文件以处理不同时间间隔的显示格式，如'刚刚'、'xx分钟前'、'昨天xx:xx'等，并在Vue组件中调用这些方法来动态更新时间信息。

摘要由CSDN通过智能技术生成

需求背景：在做社区项目的时候，发文章/评论的时间展示为：小于1分钟为刚刚，大于1分钟&&小于1小时，显示xx分钟，小于24小时，展示为xx小时前，大于24小时&&小于1天，显示为昨天xx:xx；

解决方案：moment结合vue的filters

步骤：

1.下载moment

下载指令：npm install moment

2.新建一个moment.js文件，将以下内容放置该文件中（根据需求做相应调整）

import moment from 'moment'
moment().constructor.prototype.fromNow = function (type = 1) {
  let isSameYear = this.isSame(new Date(), 'year');
  let isSameDay = this.isSame(new Date(), 'day');
  switch (type) {
    case 1: // 社区详情页
      if (!isSameYear) {
        return this.format('YY/MM/DD HH:mm');
      }
      if (!isSameDay) {
        return this.format('MM/DD HH:mm');
      }
      if (isSameDay) {
        return this.format('HH:mm');
      }
      break;
    case 2: //帖子列表
      let diffM =