vue2-relative-time-directive

vue2-relative-time-directive

Vue2相对时间转换指令, 每分钟动态刷新一次。

时间转换逻辑

• 1 分钟以前, 显示 “刚刚”
• 1 分钟 ~ 1 小时之间, 显示 “xx 分钟前”
• 1 小时 ~ 1 天之间, 显示 “xx 小时前”
• 1 天 ~ 1 个月(31天) 之间, 显示 “xx 天前”
• 大于 1 个月, 显示 “xx - xx - xx”

安装

  npm install vue2-relative-time-directive

使用

// 入口文件 main.js 全局引入
import Vue from 'vue';
import { setupGlobDirectives } from 'vue2-relative-time-directive'

setupGlobDirectives(Vue)

<!-- Vue SPC 应用 -->
<template>
    <div>
      <div v-relativeTime="timeNow"></div>
    </div>
</template>

<script>
export default {
  name: 'AppName',
  data() {
    return {
      timeNow: new Date('2023-07-06 18:20:30')
    }
  }
}
</script>