为了显 出实时性，在一些社交类产品中，甚至会实时转换为几秒钟前、几分钟前、几小时前等不同的格式，这样比直接
转换为年、月、日、时、分、秒更友好。本示例就来实现这样一个自定义指令 v-time 将表达式传入的时间戳实时转换为相对时间。
便于演示效果，我们初始 时定义了两个时间。
index.html:
< !DOCTYPE html>
<html>
<head>
<meta charset=” utf-8 ”>
<title ＞时间转换指令＜／ title>
</head>
<body>
<div id=” app” v-cloak>
<div v-time=” timeNow” ></div>
<div v-time=” timeBefore ” ></div>
</div>
<script src=” https://unpkg.com/vue/dist/vue . min . j s ” ></script>
<script src=” time.j s ” ></script>
<script src=”index . j s ” ></script>
</body>
</html>
index.js:
var app =new Vue({
el : ’ #app ’,
data : {
timeNow : (new Date()) .getTime (),
timeBefore : 1488930695721
}
}) ;
timeNow 是目前的时间， timeBefore 是一个写死的时间 2017-03-08
分析一下时间转换的逻辑
• 分钟以前，显示“刚刚”。
• 分钟～ 小时之间，显示“xx 分钟前”．
• 小时～ 天之间，显示“xx 小时前”．
• 天～ 个月 01 天）之间，显示“xx 天前
• 大于 个月，显示“xx xx xx 曰’
为了使判断逻辑更简单，统 使用时间戳进行大小判断。在写指令 v-tim 之前，需要先写
系列与时间相关的函数，我们声明 个对象 Time ，把它们都封装在里面。
time.js:
var Time = {
／／获取当前时间戳
getUnix : funct 工。 () {
var date= new Date() ;
return date.getTime() ;
／／获取今天 秒的时间戳
getTodayUnix : function () {
var date = new Date() ;
date.setHours(O) ;
date . setMinutes(O) ;
date.setSeconds(O) ;
date . setMilliseconds(O) ;
return date. get Time() ;
／／获取今年 秒的时间戳
getYearUnix: function () {
var date ＝口ew Date() ;
date . setMonth(O);
date.setDate(l) ;
date . setHours(O);
date.setMinutes(O);
date . setSeconds(O) ;
date.setMilliseconds (O) ;
return date . getTime();
／／获取标准年月日
getLastDate : function(t me) {
var date= new Date(time);
var month= date . getMonth() + 1 < 10 (date.getMonth() + 1)
date . getMonth () + 1 ;
var day= date.getDate() < 10 date.getDate() : date.getDate();
return date.getFullYear() + ’-’ + month +”-” + day;
／／转换时间
getFormatTime : function(timestamp) {
var now= this . getUnix() ;
var today= this . getTodayUnix() ;
var year= this . getYearUnix();
／／当前时间戳
／／今天 点时间戳
／／今年 点时间戳
章自定义指令 129
var timer = (now - timestamp) I 1000 ; ／／转换为秒级时
var tip = ”;
if (timer <= 0 ) {
tip 刚刚 ’；
) else if (Math . floor (timer I 60) <= 0 ) {
tip 刚刚 ’；
) else if (timer < 3600) {
tip= Math . floor(timer/60 ) 分钟前 ’；
) else if (timer >= 3600 && (timestamp - today >= 0) ) {
tip= Math . floor(timer/3600 ) 小时前 ’；
) else if (timer/86400 <= 31) {
tip= Math . ceil(timer/86400 ) 天前 ’；
) else {
tip= this . getLastDate(timestamp);
return tip;
}
};
Time getFormatTimeO方法就是自定义指令 time 所需要的，入参为毫秒级时间 返回己经
整理好时间格式的字符串。
最后在 time 里补全剩余的代码
Vue . directive ( ’ time ’, {
bind : function (el, binding) {
el.innerHTML = Time . getFormatTime (binding . value) ;
el._timeout_ = setinterval(function() {
el . innerHTML = Time . getFormatTime (binding . value) ;
) , 60000) ;
},
unbind : funct on (el ) {
clearinterval(el. meout ) ;
delete el. _timeout_ ;
}
})
网友评论