【Vue】全局自定义指令v-time，将时间戳转换成“刚刚“，“x分钟前“，“x小时前“，“x天前“

前言

今天看尤雨溪写的《Vue.js实战》第8章中有一节是讲开发一个实时时间转换指令v-time，正好想跟着练习一下， 第一次写自定义指令，记录下来，以后说不定用的上呢。

---

一、创建一个js文件，我的文件名字叫做：time.js

代码如下（示例）：

import Vue from "vue";
var Time = {
  //获取当前时间戳
  getUnix: function() {
    var date = new Date();
    return date.getTime();
  },
  //获取当前0点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(0);
    date.setHours(0);
    date.setMinutes(0);
    date.setSeconds(0);
    return date.getTime();
  },
  //获取标准年月日
  getLastDate: function(time) {
    var date = new Date(time);
    var month =
      date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1; //月从0开始，需要+1
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); //格式 01-09
    return date.getFullYear() + "-" + month + "-" + day;
  },
  //转换时间
  getFormatTime: function(timestamp) {
    var now = this.getUnix(); //当前时间戳 毫秒级
    var time = timestamp * 1000; //转为毫秒，如果是毫秒可以去除转换
    var today = this.getToDayUnix(); //今天0点时间戳
    var year = this.getYearUnix(); // 今年0点时间戳
    //由于 timestamp 是秒，所以需要乘以1000
    var timer = (now - time) / 1000; //转换为秒级时间戳
    var tip = "";
    if (timer <= 0) {
      tip = "刚刚";
    } else if (Math.floor(timer / 60) <= 0) {
      tip = "刚刚";
    } else if (timer < 3600) {
      tip = Math.floor(timer / 60) + "分钟前";
    } else if (timer >= 3600 && time - today >= 0) {
      tip = Math.floor(timer / 3600) + "小时前";
    } else if (timer / 86400 <= 31) {
      tip = Math.floor(timer / 86400) + "天前";
    } else {
      //要注意new Date(time) ，time 是毫秒级
      tip = this.getLastDate(time);
    }
    return tip;
  }
};

//全局自定义指令
Vue.directive("time", {
  bind(el, binding) {
    el.innerHTML = Time.getFormatTime(binding.value);
    //使用定时器，每分钟触发一次，更新时间，并且在 unbind 钩子里清除掉
    el.__timeout__ = setInterval(function() {
      //将格式化时间写入指令所在的元素
      el.innerHTML = Time.getFormatTime(binding.value);
    }, 60000);
  },
  unbind(el, binding) {
    // 在 unbind 钩子里清除定时器
    clearInterval(el.__timeout__);
    delete el.__timeout__;
  }
});

二、由于我创建的是全局自定义指令，直接引入js文件，就可以在元素中使用了

代码如下（示例）：

<template>
  <div class="app2-container">
    <h1 v-time="1654095159">2022-6-1 22:52:32</h1> 
    <h1 v-time="1654094736">2022-6-1 22:45:36</h1>
    <h2 v-time="1654091349">2022-6-1 21:49:9</h2>
    <h3 v-time="1653967689">2022-5-31 11:28:9</h3>
    <h4 v-time="1651412949">2022-5-1 21:49:9</h4>
  </div>
</template>

<script>
import time from "@/time.js";
export default {
  name: "App2"
};
</script>

<style lang="less" scoped></style>

效果如下：

---

参考文章：vue 自定义时间转换指令（将时间戳转换为“刚刚“，“xx分钟前“，“xx小时前“，“xx天前“）_前端61的博客-CSDN博客