vue 时间戳 格式转化(插件化) - 封装篇

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

使用vue.jsfliter 过滤器


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

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

效果图:

vue 时间戳 格式转化(插件化) - 封装篇_第1张图片


代码具体设置 · 实施:

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

一、 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 }}


	

{{resume.jobIntention}}    {{resume.salaryExp}}K    {{resume.jobWantedState}}

{{resume.seniority}}年    {{resume.location}}

{{resume.education}}    {{resume.birthday}}岁    {{ resume.updateDate | dateDiff }}

vue 时间戳 格式转化(插件化) - 封装篇_第2张图片


阅读访问:

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

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

你可能感兴趣的:(jQuery)