- API 路由统一: 移除 /api/h5/,统一 /api/pms/ 入口 - 二进制改名: api-server -> pms-api(与服务名一致) - nginx: 合并 /api/ + /pms/api/ 为 /api/pms/ - 新增 docs/API.md 接口文档 - 后端: CabinetDetail 增加 rssi/pow_fail/address/soc 等字段 - Redis 管道批量读取仓体实时数据(SOC/电压/电流/功率) - DB: 所有 TIMESTAMP 列改为 DATETIME(修复类型不匹配) - 用户管理: 新增创建时间/修改时间列,状态改用 Switch - 角色管理/用户管理: 操作按钮改为图标 - PC 设备详情: 基本信息补全 RSSI/ICCID/电源/地址 - PC 卡片: 通道统计改用 Lucide 图标,颜色统一 - PC 二维码: canvas 渲染,含编号文字,支持右键下载 - H5: 按 uni-app 规范修正导航(navigateTo 替代 reLaunch) - H5: 详情页加返回导航条 - H5: 扫码支持摄像头(jsQR)+ ?id= 参数 - H5: 底部 tabBar 在所有页面常显 - H5: 首页统计改为 6 项(设备/通道/空闲/充电/充满/故障) - H5: 下拉刷新 / 上拉加载 - 产品首页: 添加业务联系 - 文档: 清理过时文件,补充缺失规范章节
3.4 KiB
3.4 KiB
category
| category |
|---|
| Time |
useTimeAgo
Reactive time ago. Automatically update the time ago string when the time changes.
Usage
import { useTimeAgo } from '@vueuse/core'
const timeAgo = useTimeAgo(new Date(2021, 0, 1))
Component Usage
<template>
<UseTimeAgo v-slot="{ timeAgo }" :time="new Date(2021, 0, 1)">
Time Ago: {{ timeAgo }}
</UseTimeAgo>
</template>
Non-Reactivity Usage
In case you don't need the reactivity, you can use the formatTimeAgo function to get the formatted string instead of a Ref.
import { formatTimeAgo } from '@vueuse/core'
const timeAgo = formatTimeAgo(new Date(2021, 0, 1)) // string
Type Declarations
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/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