Tantalum UI

Appearance

Return to top
On this page

TimeAgo 相对时间

注：

  • 本组件没有指定样式，默认情况下可对文字样式进行自定义。
vue
<template>
  <ta-group title="基础用法">
    <ta-cell label="当前">
      <ta-time-ago :time="time" />
    </ta-cell>
    <ta-cell label="2021-05-01">
      <ta-time-ago :time="time2" />
    </ta-cell>
  </ta-group>
  <ta-group title="间隔">
    <ta-cell label="interval=2">
      <ta-time-ago :time="time" :interval="interval" />
    </ta-cell>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import dayjs from 'dayjs'

export default defineComponent({
  name: 'ExpTimeAgo',
  data() {
    return {
      time: new Date(),
      time2: dayjs('2021-05-01', 'YYYY-MM-DD').toDate(),
      interval: 2
    }
  }
})
</script>

Import

js
import { TaTimeAgo } from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Props

属性类型默认值必填说明
timeDate | string | number99否需要对比的时间，可以是 Date 类型，时间戳，或者 '2021-05-01' 之类的 string 类型（需要搭配 formatTemplate 使用）
format-templatestring否time 为 string 类型对应的解析模板，模板规则参考 Dayjs
intervalnumber60否自动更新的间隔，单位：秒