时间戳 格式转化 - 封装插件: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}} {{resume.salaryExp}}K {{resume.jobWantedState}} </p>
<p class="clr-666">{{resume.seniority}}年 {{resume.location}} </p>
<p class="clr-b2">{{resume.education}} {{resume.birthday}}岁
<!--{{(new Date(resume.updateDate)).getMonth()+1}}月
{{(new Date(resume.updateDate)).getDate()}}日
{{(new Date(resume.updateDate)).getHours()}}时 -->
{{ resume.updateDate | dateDiff }}
</p>
</div>
</el-col>
阅读访问:
以上就是关于“ vue 时间戳 格式转化(插件化) - 封装篇 ” 的全部内容。