Time 相对时间

概述

常用于表示几分钟前、几小时前等相对于此时此刻的时间描述。

代码示例

Time 相对时间 - 图1

基础用法

设置一个时间戳或 Date,可自动转为相对于当前的时间。

  1. <template>
  2. <div>
  3. <Time :time="time1" />
  4. <br>
  5. <Time :time="time2" />
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. data () {
  11. return {
  12. time1: (new Date()).getTime() - 60 * 3 * 1000,
  13. time2: (new Date()).getTime() - 86400 * 3 * 1000
  14. }
  15. }
  16. }
  17. </script>

Time 相对时间 - 图2

自动更新间隔

设置自动更新间隔,默认为 60 秒。

  1. <template>
  2. <Time :time="time3" :interval="1" />
  3. </template>
  4. <script>
  5. export default {
  6. data () {
  7. return {
  8. time3: new Date()
  9. }
  10. }
  11. }
  12. </script>

Time 相对时间 - 图3

不同类型

可以根据情况,设置不同的显示类型。

  1. <template>
  2. <div>
  3. <Time :time="time2" />
  4. <br>
  5. <Time :time="time2" type="date" />
  6. <br>
  7. <Time :time="time2" type="datetime" />
  8. </div>
  9. </template>
  10. <script>
  11. export default {
  12. data () {
  13. return {
  14. time2: (new Date()).getTime() - 86400 * 3 * 1000
  15. }
  16. }
  17. }
  18. </script>

Time 相对时间 - 图4

锚点

设置 hash 属性,相对时间可以点击并定位锚点。

  1. <template>
  2. <Time :time="time2" hash="#hash" />
  3. </template>
  4. <script>
  5. export default {
  6. data () {
  7. return {
  8. time2: (new Date()).getTime() - 86400 * 3 * 1000
  9. }
  10. }
  11. }
  12. </script>

API

Time props

属性 说明 类型 默认值
time 需要对比的时间,可以是时间戳或 Date 类型 Number | Date | String -
type 类型,可选值为 relative、date 或 datetime String relative
interval 自动更新的间隔,单位:秒 Number 60
hash 填写该值,点击会定位锚点 String -