溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

淺談在Vue.js中如何實(shí)現(xiàn)時(shí)間轉(zhuǎn)換指令

發(fā)布時(shí)間：2020-09-15 19:45:01 來(lái)源：腳本之家 閱讀：163 作者：deniro 欄目：web開發(fā)

在社區(qū)中，發(fā)布的動(dòng)態(tài)信息，經(jīng)常會(huì)有一個(gè)相對(duì)余實(shí)際發(fā)布時(shí)間的相對(duì)時(shí)間。比如這里的微博：

淺談在Vue.js中如何實(shí)現(xiàn)時(shí)間轉(zhuǎn)換指令

服務(wù)端存儲(chǔ)的時(shí)間格式，一般為 Unix 時(shí)間戳，比如 2019/1/6 13:40:1 的Unix 時(shí)間戳為 1546753201651。前端在獲取到這個(gè)時(shí)間戳之后，會(huì)轉(zhuǎn)換為可讀格式的時(shí)間。在社交類產(chǎn)品中，一般會(huì)將時(shí)間戳轉(zhuǎn)換為 x 分鐘前，x 小時(shí)前或者 x 天前，因?yàn)檫@樣的顯示方式用戶體驗(yàn)更好。

我們可以自定義一個(gè) v-relative-time 指令來(lái)實(shí)現(xiàn)上述功能。

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>
    現(xiàn)在時(shí)間：<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 指令的入?yún)榫_到毫秒的 Unix 時(shí)間戳，如果入?yún)挝粸槊?，那么可以乘?1000 后，再傳入。

js：

/**
 * 時(shí)間對(duì)象
 * @type {{getCurrentUnix: Time.getCurrentUnix, getTodayUnix: Time.getTodayUnix, getThisYearUnix: Time.getThisYearUnix, format: Time.format, compensateZero: Time.compensateZero, transform: Time.transform}}
 */
var Time = {
  //獲取當(dāng)前 Unix 時(shí)間戳
  getCurrentUnix: function () {
    return new Date().getTime();
  },
  //獲取今日 0 點(diǎn) 0 分 0 秒的 Unix 時(shí)間戳
  getTodayUnix: function () {
    var date = new Date();
    date.setHours(0);
    date.setMinutes(0);
    date.setSeconds(0);
    date.setMilliseconds(0);
    return date.getTime();
  },
  //獲取今年 1 月 1 日 0 點(diǎn) 0 分 0 秒的 Unix 時(shí)間戳
  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 代表月份的整數(shù)值從0（1月）到11（12月），所以需要轉(zhuǎn)換
    var month = this.compensateZero(dateObj.getMonth() + 1);
    var day = this.compensateZero(dateObj.getDate());
    return dateObj.getFullYear() + '-' + month + '-' + day;
  },
  /**
   * 如果值小于 10，那么在前面補(bǔ)一個(gè)零
   * @param val
   * @returns {*}
   */
  compensateZero: function (val) {
    if (typeof val == 'number') {
      return val < 10 ? '0' + val : val;
    } else {
      return val;
    }
  },
  /**
   * 轉(zhuǎn)換為相對(duì)時(shí)間
   *
   * 1 分鐘之前，返回“剛剛”
   * 1 分鐘到 1 小時(shí)之間，返回“xx 分鐘前”
   * 1 小時(shí)到 1 天之間，返回“xx 小時(shí)前”
   * 1 天到 1 個(gè)月（假設(shè)固定為 31 天）之間，返回“xx 天前”
   * 大于 1 個(gè)月，返回“xx 年 xx 月 xx 日”
   * @param val unix 時(shí)間戳
   */
  transform: function (val) {
    //計(jì)算時(shí)間間隔（單位：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 小時(shí)之間
      return Math.floor(interval / 60) + ' 分鐘前';
    } else if (interval >= 3600 && (val - this.getTodayUnix() >= 0)) {//1 小時(shí)到 1 天之間
      return Math.floor(interval / 3600) + ' 小時(shí)前';
    } else if (interval / (3600 * 24) <= 31) {//1 天到 1 個(gè)月（假設(shè)固定為 31 天）之間
      return Math.ceil(interval / (3600 * 24)) + ' 天前';
    } else {
      return this.format(val);
    }
  }

};

時(shí)間轉(zhuǎn)換邏輯為：

  1. 如果是 1 分鐘之前，返回“剛剛”
  2. 如果是 1 分鐘到 1 小時(shí)之間，返回“xx 分鐘前”
  3. 如果是 1 小時(shí)到 1 天之間，返回“xx 小時(shí)前”
  4. 如果是 1 天到 1 個(gè)月（假設(shè)固定為 31 天）之間，返回“xx 天前”
  5. 如果是大于 1 個(gè)月，返回“xx 年 xx 月 xx 日”

我們專門設(shè)計(jì)了一個(gè) Time 對(duì)象，用于定義與時(shí)間相關(guān)的函數(shù)：

  1. 獲取當(dāng)前 Unix 時(shí)間戳。
  2. 獲取今日 0 點(diǎn) 0 分 0 秒的 Unix 時(shí)間戳。
  3. 獲取今年 1 月 1 日 0 點(diǎn) 0 分 0 秒的 Unix 時(shí)間戳。
  4. 格式化日期函數(shù)，輸出格式為 xxxx-xx-xx。
  5. 如果值小于 10，那么在前面補(bǔ)一個(gè)零的格式化函數(shù)。
  6. 轉(zhuǎn)換為相對(duì)時(shí)間。

以下是與時(shí)間相關(guān)的小知識(shí)：

Math.floor()
Math.ceil()
/**
 * 相對(duì)時(shí)間指令
 */
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
  }
});

在相對(duì)時(shí)間指令中，我們?cè)?bind() 中，把指令中的入?yún)⑥D(zhuǎn)換為相對(duì)時(shí)間，然后寫入指令所在的元素中，接著還定義了一個(gè)每分鐘更新元素內(nèi)容的定時(shí)器。在 unbind() 中，執(zhí)行清除定時(shí)器操作。

渲染結(jié)果：

淺談在Vue.js中如何實(shí)現(xiàn)時(shí)間轉(zhuǎn)換指令

編寫自定義指令，建議如下：

  1. 在 bind() 中定義初始化操作，比如綁定一次性事件。
  2. 在 unbind() 中定義解綁與刪除操作。
  3. 雖然可以在自定義指令中任意操作 DOM，但這就不是數(shù)據(jù)驅(qū)動(dòng) DOM 啦，所以遇到這樣的場(chǎng)景，建議使用組件來(lái)滿足業(yè)務(wù)要求。

本文示例代碼

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手