首頁  >  文章  >  web前端  >  使用Vue開發時間轉換指令該怎麼做?

使用Vue開發時間轉換指令該怎麼做?

亚连
亚连原創
2018-06-11 16:15:522173瀏覽

我們就來實現這樣一個Vue自訂指令v-time,將表達式傳入的時間戳實時轉換為相對時間。下面我為大家帶來了使用Vue開發一個即時性時間轉換指令,需要的朋友參考下吧

#前言

最近有一個說法,如果你看見某個網站的某個功能,你就大概能猜出背後的業務邏輯是怎麼樣的,以及你能動手開發一個一毛一樣的功能,那麼你的前端技能算是進階中高級水平了。例如咱們今天要聊的這個主題:如何用Vue開發一個即時性的時間轉換指令?

接下來正文從這開始~

 如上圖所示(我是截取的某技術社群首頁的部分頁面),大家看到用紅色邊框勾選的時間文字了吧。很多網站發佈動態的時候,都會有一個相對本機時間轉換後的相對時間。那你知道這個功能實現的背後原理是什麼嗎?如果有興趣的,請備好瓜子,茶水,繼續往下讀。

一般在伺服器的儲存時間格式是Unix時間戳,例如 2018-01-17 06:00:00的時間戳記是1516140000。前端在拿到資料後,將它轉換為可持續的時間格式再顯示出來。為了顯示即時性,在一些社交類產品中,甚至會即時轉換為幾秒前、幾分鐘前、幾小時前等不同的格式,因為這樣比直接轉換為年、月、日、時、分、秒,顯得對使用者更加友好,體驗更人性化。

今天,我們就來實作這樣一個Vue自訂指令v-time,將表達式傳入的時間戳實時轉換為相對時間。為了方便演示效果,我們初始化時定義了兩個時間。

首先來看html結構:

<p id="app" v-cloak>
  <p v-time="timeNow"></p>
  <p v-time="timeBefore"></p>
</p>

以及初始化一個Vue實例:

var app = new Vue({
  el:&#39;#app&#39;,
  data:{
    timeNow:(new Date()).getTime(),
    timeBefore:686219755822
  }
})

timeNow是目前的時間,timeBefore是一個寫死的時間:1991-09- 30。

先來分析時間轉換的邏輯:

  • 1分鐘以前,顯示「剛剛」。

  • 1分鐘~1小時之間,顯示「xx分鐘前」。

  • 1小時~1天之間,顯示「xx小時前」。

  • 1天~1個月(31天)之間,顯示「xx天前」。

  • 大於1個月,顯示「xx年xx月xx日」。

這樣羅列出來,邏輯就一目了然了。為了讓判斷更簡單,我們在這裡統一使用時間戳來進行大小判斷。在寫指令v-time之前,需要先寫一系列與時間相關的函數 ,我們宣告一個物件Time,把它們都封裝到裡面。

 var Time = {
      //获取当前时间戳
      getUnix:function(){
        var date = new Date();
        return date.getTime();
      },
      //获取今天0点0分0秒的时间戳
      getTodayUnix:function(){
        var date = new Date();
        date.setHours(0);
        date.setMinutes(0);
        date.setSeconds(0);
        date.setMilliseconds(0);
        return date.getTime();
      },
      //获取今年1月1日0点0分0秒的时间戳
      getYearUnix:function(){
        var date = new Date();
        date.setMonth(0);
        date.setDate(1);
        date.setHours(0);
        date.setMinutes(0);
        date.setSeconds(0);
        date.setMilliseconds(0);
        return date.getTime();
      },
      //获取标准年月日
      getLastDate:function(time){
        var date = new Date(time);
        var month = date.getMonth() + 1 < 10 ? &#39;0&#39; + (date.getMonth() + 1) : date.getMonth() + 1;
        var day = date.getDate() < 10 ? &#39;0&#39; + date.getDate() : date.getDate();
        return date.getFullYear() + &#39;-&#39; + month + &#39;-&#39; + day;
      },
      //转换时间
      getFormatTime:function(timestamp){
        var now = this.getUnix(); // 当前时间戳
        var today = this.getTodayUnix(); // 今天0点的时间戳
        var year = this.getYearUnix(); // 今年0点的时间戳
        var timer = (now - timestamp) / 1000; // 转换为秒级时间戳
        var tip = &#39;&#39;;

        if(timer <= 0){
          tip = &#39;刚刚&#39;;
        }else if(Math.floor(timer/60) <= 0){
          tip = &#39;刚刚&#39;;
        }else if(timer < 3600){
          tip = Math.floor(timer/60) + &#39;分钟前&#39;;
        }else if(timer >= 3600 && (timestamp - today >= 0)){
          tip = Math.floor(timer/3600) + &#39;小时前&#39;;
        }else if(timer/86400 <= 31){
          tip = Math.ceil(timer/86400) + &#39;天前&#39;;
        }else{
          tip = this.getLastDate(timestamp);
        }
        return tip;
      }
    }

當然,如果你對JavaScript的Date型別不太了解,可以先去runoob.com上面去了解。

接著說回來,Time.getFormatTime()方法就是自訂指令v-time所需要的,參數為毫秒時間戳,傳回已經整理好的時間格式的字串。

最後,來看我們如何用Vue自訂一個指令v-time:

Vue.directive(&#39;time&#39;,{
  bind:function(el, binding){
    el.innerHTML = Time.getFormatTime(binding.value);
    el.__timeout__ = setInterval(function(){
      el.innerHTML = Time.getFormatTime(binding.value);
    }, 60000)
  },
  unbind:function(el){
    clearInterval(el.__timeout__);
    delete el.__timeout__;
  }
})

在bind鉤子裡,將指令v-time表達式的值binding.value作為參數傳入Time.getFormatTime()方法中得到格式化時間,在透過el.innerHTML寫入指令所在元素。定時器el.__timeout__每分鐘觸發一次,更新時間,並且在unbind鉤子裡清除掉。

你可能會問,這個binding.value是什麼?

當然,你可以透過console.log(binding)方法在控制台列印一下,就一目了然了。

在這裡,我先補充下,自訂指令的選項是由幾個鉤子函數組成的,有bind、insert、update、componentUpdated、unbind。而其中的bind和unbind只呼叫一次。每個鉤子函數都有幾個參數可用,例如我們上面用到的el和binding。

el指令所綁定的元素可以用來直接操作DOM。而binding是一個對象,包含許多屬性,如上圖所示:

  • name:指令名稱

  • rawName:自訂指令

  • value:指令的綁定值

  • expression:綁定值的字串形式

  • modifiers:一個包含修飾符的物件

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

在vue中如何實現頁面跳轉後返回原始頁面初始位置

在vue-router中配合ElementUI如何實作導航

詳解解讀在vue專案中引入elementUI元件

在vue中實作刷新和tab切換

在jQuery如何實作滑鼠響應式淘寶動畫效果

jQuery實現的滑鼠響應緩衝動畫效果

以上是使用Vue開發時間轉換指令該怎麼做?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn