TimeFormat 时间格式化 1.1.0

手机扫码预览

13:03



---

组件名：rice-button

时间格式化展示组件，支持绝对时间与相对时间

平台兼容性

uni-app x

Android	iOS	HarmonyOS	HarmonyOS(Vapor)	微信小程序	h5
√	√	√	√(1.1.0+)	√	√

基本使用

• 秒级会自动换算成毫秒 为需要格式化的时间戳，支持秒级（10 位）或毫秒级（13 位）;
• format 为要格式化的格式，支持的格式见 dateuts

<rice-time-format :timestamp="timestamp" />
<rice-time-format :timestamp="timestamp" format="YYYY年MM月DD号" style="margin:12px 0" />
<rice-time-format :timestamp="timestamp" format="HH:mm:ss"/>

<script setup>
	const timestamp = ref(Date.now())
</script>

相对时间

format 还支持传入 relative 属性，说明如下：

1. 今天内： < 1 分钟 输出“刚刚” ；< 60 分钟 输出“n分钟前” ；>= 60 分钟 输出“n小时前”
2. 昨天内：输出“昨天 HH:mm”
3. 超过昨天：输出“YYYY-MM-DD HH:mm”
4. 未来时间：当 futureRelative 为 true 时
   • 今天内：< 1 分钟 输出“稍后”； < 60 分钟 输出“n分钟后” ；>= 60 分钟 输出“n小时后”;
   • 明天内：输出“明天 HH:mm”;
   • futureRelative 为 false 或者超过明天直接输出“YYYY-MM-DD HH:mm”

<rice-time-format :timestamp="timestamp" format="relative"/>
<rice-time-format :timestamp="timestamp1" format="relative" style="margin:12px 0" />
<rice-time-format :timestamp="timestamp2" format="relative" />

自定义样式

直接在组件上使用 class 或者 style 即可

<rice-time-format :timestamp="timestamp" class="text-class" />

API

Props

属性名	类型	说明	默认值
timestamp	Number	时间戳	-
format	String	输出的格式	-
future-relative	Boolean	未来时间是否使用绝对时间	true

类型定义

组件导出如下类型

// 组件类型
const switchRef = ref<RiceTimeFormatComponentPublicInstance | null>(null)