淺談在Vue.js中如何實現時間轉換指令

2019-11-19 12:19:11

字體：大中小

來源：轉載

供稿：網友

在社區中，發布的動態信息，經常會有一個相對余實際發布時間的相對時間。比如這里的微博：

服務端存儲的時間格式，一般為 Unix 時間戳，比如 2019/1/6 13:40:1 的Unix 時間戳為 1546753201651。前端在獲取到這個時間戳之后，會轉換為可讀格式的時間。在社交類產品中，一般會將時間戳轉換為 x 分鐘前，x 小時前或者 x 天前，因為這樣的顯示方式用戶體驗更好。

我們可以自定義一個 v-relative-time 指令來實現上述功能。

html：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style type="text/css">  </style></head><body>  <div id="app" v-cloak>    現在時間：<div v-relative-time="now"></div><p></p>    2019/1/6 13:45:02:<div v-relative-time="1546753502000"></div><p></p>    2019/1/6 8:02:02:<div v-relative-time="1546732922000"></div><p></p>    2019/1/5 22:02:02:<div v-relative-time="before"></div><p></p>    2019/1/1 22:02:02:<div v-relative-time="1546351322000"></div><p></p>    2018/1/6 8:02:02:<div v-relative-time="1515196922000"></div>  </div><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script><script src="index.js"></script></body></html>

注意：div v-relative-time 指令的入參為精確到毫秒的 Unix 時間戳，如果入參單位為秒，那么可以乘以 1000 后，再傳入。

js：

/** * 時間對象 * @type {{getCurrentUnix: Time.getCurrentUnix, getTodayUnix: Time.getTodayUnix, getThisYearUnix: Time.getThisYearUnix, format: Time.format, compensateZero: Time.compensateZero, transform: Time.transform}} */var Time = {  //獲取當前 Unix 時間戳  getCurrentUnix: function () {    return new Date().getTime();  },  //獲取今日 0 點 0 分 0 秒的 Unix 時間戳  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 秒的 Unix 時間戳  getThisYearUnix: 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();  },  //格式化日期；輸出格式為 xxxx-xx-xx  format: function (val) {    var dateObj = new Date(val);    //month 代表月份的整數值從0（1月）到11（12月），所以需要轉換    var month = this.compensateZero(dateObj.getMonth() + 1);    var day = this.compensateZero(dateObj.getDate());    return dateObj.getFullYear() + '-' + month + '-' + day;  },  /**   * 如果值小于 10，那么在前面補一個零   * @param val   * @returns {*}   */  compensateZero: function (val) {    if (typeof val == 'number') {      return val < 10 ? '0' + val : val;    } else {      return val;    }  },  /**   * 轉換為相對時間   *   * 1 分鐘之前，返回“剛剛”   * 1 分鐘到 1 小時之間，返回“xx 分鐘前”   * 1 小時到 1 天之間，返回“xx 小時前”   * 1 天到 1 個月（假設固定為 31 天）之間，返回“xx 天前”   * 大于 1 個月，返回“xx 年 xx 月 xx 日”   * @param val unix 時間戳   */  transform: function (val) {    //計算時間間隔（單位：s）    console.log("getCurrentUnix:" + this.getCurrentUnix());    var interval = (this.getCurrentUnix() - val) / 1000;    if (Math.floor(interval / 60) <= 0) {//1 分鐘之前      return '剛剛';    } else if (interval < 3600) {//1 分鐘到 1 小時之間      return Math.floor(interval / 60) + ' 分鐘前';    } else if (interval >= 3600 && (val - this.getTodayUnix() >= 0)) {//1 小時到 1 天之間      return Math.floor(interval / 3600) + ' 小時前';    } else if (interval / (3600 * 24) <= 31) {//1 天到 1 個月（假設固定為 31 天）之間      return Math.ceil(interval / (3600 * 24)) + ' 天前';    } else {      return this.format(val);    }  }};

時間轉換邏輯為：

如果是 1 分鐘之前，返回“剛剛”
如果是 1 分鐘到 1 小時之間，返回“xx 分鐘前”
如果是 1 小時到 1 天之間，返回“xx 小時前”
如果是 1 天到 1 個月（假設固定為 31 天）之間，返回“xx 天前”
如果是大于 1 個月，返回“xx 年 xx 月 xx 日”

我們專門設計了一個 Time 對象，用于定義與時間相關的函數：

獲取當前 Unix 時間戳。
獲取今日 0 點 0 分 0 秒的 Unix 時間戳。
獲取今年 1 月 1 日 0 點 0 分 0 秒的 Unix 時間戳。
格式化日期函數，輸出格式為 xxxx-xx-xx。
如果值小于 10，那么在前面補一個零的格式化函數。
轉換為相對時間。

以下是與時間相關的小知識：

Math.floor()Math.ceil()

/** * 相對時間指令 */Vue.directive('relative-time', {  bind: function (el, binding) {    el.innerHTML = Time.transform(binding.value);    el._relativeTime = setInterval(function () {      el.innerHTML = Time.transform(binding.value);    }, 60000);//每分鐘，刷新一次  },  unbind: function (el) {    clearInterval(el._relativeTime);    delete el._relativeTime;  }});var app = new Vue({  el: '#app',  data: {    now: (new Date()).getTime(),    //2019/1/5 22:02:02    before: 1546696922000  }});

在相對時間指令中，我們在 bind() 中，把指令中的入參轉換為相對時間，然后寫入指令所在的元素中，接著還定義了一個每分鐘更新元素內容的定時器。在 unbind() 中，執行清除定時器操作。

渲染結果：