04 06 2020

问题描述

项目中常常需要将发布的文章时间展现为“XX时间前”,如“1分钟前”、“2小时前”、“3天前”等等。

解决方案

1.vue-timeago

安装timeago.js
  1. yarn add vue-timeago
  2. # 或者
  3. npm i vue-timeago
引入timeago.js
  1. import Vue from 'vue'
  2. import VueTimeago from 'vue-timeago'
  3. Vue.use(VueTimeago, {
  4. name: 'Timeago', // Component name, `Timeago` by default
  5. locale: 'zh-CN', // Default locale
  6. locales: {
  7. 'zh-CN': require('date-fns/locale/zh_cn'),
  8. ja: require('date-fns/locale/ja')
  9. }
  10. })
使用
  1. <timeago :datetime="time"></timeago>
  2. <!-- 每60秒更新 -->
  3. <timeago :datetime="time" :auto-update="60"></timeago>
  4. <!-- 自定义 locale -->
  5. <timeago :datetime="time" locale="zh-CN"></timeago>
展现效果

2.自定义date.js

自定义工具
  1. /**
  2. * @desc 格式化日期字符串
  3. * @param { String} - 日期时间字符串
  4. * @returns { String } 格式化后的日期字符串
  5. */
  6. export function formatDate(value) {
  7. // 注意ie和firefox浏览器时间格式兼容性
  8. let timestamp=new Date(value.replace(/-/g,"/").getTime();
  9. // 补全为13位
  10. let arrTimestamp = (timestamp + '').split('');
  11. for (let start = 0; start < 13; start++) {
  12. if (!arrTimestamp[start]) {
  13. arrTimestamp[start] = '0';
  14. }
  15. }
  16. timestamp = arrTimestamp.join('') * 1;
  17. let minute = 1000 * 60;
  18. let hour = minute * 60;
  19. let day = hour * 24;
  20. let month = day * 30;
  21. let now = new Date().getTime();
  22. let diffValue = now - timestamp;
  23. // 如果本地时间反而小于变量时间
  24. if (diffValue < 0) {
  25. return '不久前';
  26. }
  27. // 计算差异时间的量级
  28. let yearC = diffValue / (month*12);
  29. let monthC = diffValue / month;
  30. let weekC = diffValue / (7 * day);
  31. let dayC = diffValue / day;
  32. let hourC = diffValue / hour;
  33. let minC = diffValue / minute;
  34. // 数值补0方法
  35. let zero = function (value) {
  36. if (value < 10) {
  37. return '0' + value;
  38. }
  39. return value;
  40. };
  41. // 使用
  42. if (yearC >= 1) {
  43. // 超过1年,直接显示年月日
  44. return (function () {
  45. let date = new Date(timestamp);
  46. return date.getFullYear() + '年' + zero(date.getMonth() + 1) + '月' + zero(date.getDate()) + '日';
  47. })();
  48. } else if (monthC >= 1) {
  49. return parseInt(monthC) + '月前';
  50. } else if (weekC >= 1) {
  51. return parseInt(weekC) + '周前';
  52. } else if (dayC >= 1) {
  53. return parseInt(dayC) + '天前';
  54. } else if (hourC >= 1) {
  55. return parseInt(hourC) + '小时前';
  56. } else if (minC >= 1) {
  57. return parseInt(minC) + '分钟前';
  58. }
  59. return '刚刚';
  60. }
页面引入
  1. import { formatDate } from '~/plugins/date';
方法定义
  1. getFormatDate(val){
  2. return formatDate(val);
  3. }
html使用
  1. {{getFormatDate(publishTime)}} #publishTime为日期时间字符串
展示效果

小结

在使用vue-timeago无法去除“大约”这个字样,只得自定义js。

延伸阅读
  1. vue 日期时间转为XX时间前展示
发表评论