useTimeAgo

分类

时间

导出大小

1.42 kB

上次更改

3 个月前

响应式时间差。当时间变化时，自动更新时间差字符串。

演示

源代码在线演示 (beta)

刚刚

0毫秒

用法

import { useTimeAgo
 } from '@vueuse/core'

const timeAgo
 = useTimeAgo
(new Date
(2021, 0, 1))

组件用法

此函数还通过 @vueuse/components 包提供了一个无渲染组件版本。了解更多用法。

vue

<template>
  <UseTimeAgo v-slot="{ timeAgo
 }" :time
="new Date
(2021, 0, 1)">
    Time Ago: {{ timeAgo
 }}
  </UseTimeAgo>
</template>

非响应式用法

如果您不需要响应式功能，可以使用 formatTimeAgo 函数来获取格式化字符串，而不是 Ref。

import { formatTimeAgo
 } from '@vueuse/core'

const timeAgo
 = formatTimeAgo
(new Date
(2021, 0, 1)) // string

类型声明

显示类型声明

export type UseTimeAgoFormatter
<T
 = number> = (
  value
: T
,
  isPast
: boolean,
) => string
export type UseTimeAgoUnitNamesDefault
 =
  | "second"
  | "minute"
  | "hour"
  | "day"
  | "week"
  | "month"
  | "year"
export interface UseTimeAgoMessagesBuiltIn {
  justNow
: string
  past
: string | UseTimeAgoFormatter
<string>
  future
: string | UseTimeAgoFormatter
<string>
  invalid
: string
}
export type UseTimeAgoMessages
<
  UnitNames
 extends string = UseTimeAgoUnitNamesDefault
,
> = UseTimeAgoMessagesBuiltIn &
  Record
<UnitNames
, string | UseTimeAgoFormatter
<number>>
export interface FormatTimeAgoOptions
<
  UnitNames
 extends string = UseTimeAgoUnitNamesDefault
,
> {
  /**
   * Maximum unit (of diff in milliseconds) to display the full date instead of relative
   *
   * @default undefined
   */
  max
?: UnitNames
 | number
  /**
   * Formatter for full date
   */
  fullDateFormatter
?: (date
: Date) => string
  /**
   * Messages for formatting the string
   */
  messages
?: UseTimeAgoMessages
<UnitNames
>
  /**
   * Minimum display time unit (default is minute)
   *
   * @default false
   */
  showSecond
?: boolean
  /**
   * Rounding method to apply.
   *
   * @default 'round'
   */
  rounding
?: "round" | "ceil" | "floor" | number
  /**
   * Custom units
   */
  units
?: UseTimeAgoUnit
<UnitNames
>[]
}
export interface UseTimeAgoOptions
<
  Controls
 extends boolean,
  UnitNames
 extends string = UseTimeAgoUnitNamesDefault
,
> extends FormatTimeAgoOptions
<UnitNames
> {
  /**
   * Expose more controls
   *
   * @default false
   */
  controls
?: Controls

  /**
   * Intervals to update, set 0 to disable auto update
   *
   * @default 30_000
   */
  updateInterval
?: number
}
export interface UseTimeAgoUnit
<
  Unit
 extends string = UseTimeAgoUnitNamesDefault
,
> {
  max
: number
  value
: number
  name
: Unit

}
export type UseTimeAgoReturn
<Controls
 extends boolean = false> =
  Controls
 extends true
    ? {
        timeAgo
: ComputedRef
<string>
      } & Pausable

    : ComputedRef
<string>
/**
 * Reactive time ago formatter.
 *
 * @see https://vueuse.org.cn/useTimeAgo
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function useTimeAgo
<
  UnitNames
 extends string = UseTimeAgoUnitNamesDefault
,
>(
  time
: MaybeRefOrGetter
<Date | number | string>,
  options
?: UseTimeAgoOptions
<false, UnitNames
>,
): UseTimeAgoReturn
<false>
export declare function useTimeAgo
<
  UnitNames
 extends string = UseTimeAgoUnitNamesDefault
,
>(
  time
: MaybeRefOrGetter
<Date | number | string>,
  options
: UseTimeAgoOptions
<true, UnitNames
>,
): UseTimeAgoReturn
<true>
export declare function formatTimeAgo
<
  UnitNames
 extends string = UseTimeAgoUnitNamesDefault
,
>(
  from
: Date,
  options
?: FormatTimeAgoOptions
<UnitNames
>,
  now
?: Date | number,
): string