vue 时间戳 格式转化（插件化） - 封装篇

版权声明：本文为博主原创文章，允许转载，但转载必须注明出处并附带首发链接 https://blog.csdn.net/qq_35393869/article/details/88593943

时间戳 格式转化 - 封装插件：vue的 fliter 过滤器

使用vue.js的 fliter 过滤器

---

通过这个插件化方法，说明一下全局方法及组件的设置和使用问题。

• 全局组件 · 注册方法：含 .vue和.js文件
• 全局js函数 · 注册方法：含 .js文件
• 全局注册 · fliter过滤器 · 及 npm install moment.js (第三方组件)

---

效果图：

---

代码具体设置 · 实施：

官方相关文档：过滤器 【推荐先阅读】

一、 main.js具体代码如下： (全局注册：过滤器)

// 时间戳格式化：全局过滤器

Vue.filter('dateDiff', function (timestamp) {
  // 补全为13位
  var arrTimestamp = (timestamp + '').split('');
  for (var start = 0; start < 13; start++) {
      if (!arrTimestamp[start]) {
          arrTimestamp[start] = '0';
      }
  }
  timestamp = arrTimestamp.join('') * 1;

  var minute = 1000 * 60;
  var hour = minute * 60;
  var day = hour * 24;
  var halfamonth = day * 15;
  var month = day * 30;
  var now = new Date().getTime();
  var diffValue = now - timestamp;

  // 如果本地时间反而小于变量时间
  if (diffValue < 0) {
      return '不久前';
  }

  // 计算差异时间的量级
  var monthC = diffValue / month;
  var weekC = diffValue / (7 * day);
  var dayC = diffValue / day;
  var hourC = diffValue / hour;
  var minC = diffValue / minute;

  // 数值补0方法
  var zero = function (value) {
      if (value < 10) {
          return '0' + value;
      }
      return value;
  };

  // 使用
  if (monthC > 12) {
      // 超过1年，直接显示年月日
      return (function () {
          var date = new Date(timestamp);
          return date.getFullYear() + '年' + zero(date.getMonth() + 1) + '月' + zero(date.getDate()) + '日';
      })();
  } else if (monthC >= 1) {
      return parseInt(monthC) + "月前";
  } else if (weekC >= 1) {
      return parseInt(weekC) + "周前";
  } else if (dayC >= 1) {
      return parseInt(dayC) + "天前";
  } else if (hourC >= 1) {
      return parseInt(hourC) + "小时前";
  } else if (minC >= 1) {
      return parseInt(minC) + "分钟前";
  }
  return '刚刚';
})

二、 在目标.vue文件内调用方式：（部分代码 截图如下）

// search.vue  
// 注意代码调用 ： {{ resume.updateDate | dateDiff }}

<el-col :span="8">
	<div class="box2">
		<p class="clr-1a">{{resume.jobIntention}}   &nbsp;&nbsp;  {{resume.salaryExp}}K &nbsp;&nbsp;  {{resume.jobWantedState}} </p>
		<p class="clr-666">{{resume.seniority}}年   &nbsp;&nbsp; {{resume.location}}   </p>
		<p class="clr-b2">{{resume.education}}   &nbsp;&nbsp; {{resume.birthday}}岁 &nbsp;&nbsp;  
			<!--{{(new Date(resume.updateDate)).getMonth()+1}}月
			 {{(new Date(resume.updateDate)).getDate()}}日&nbsp; 
			{{(new Date(resume.updateDate)).getHours()}}时 -->
			{{ resume.updateDate | dateDiff }}
		</p>
	</div>
</el-col>

---

阅读访问：

• 时间戳：在线工具
• 时间戳显示为多少分钟前，多少天前的JS处理

---

以上就是关于“ vue 时间戳 格式转化（插件化） - 封装篇 ” 的全部内容。