# t-text-time

TextTime 时间文本

t-text-time 组件介绍

t-text-time 是用于格式化显示时间（秒数转换）的文本组件，支持将秒数转换为天、时、分、秒的格式显示，适用于倒计时、活动剩余时间等场景。

t-text-time 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-text-time 基础用法

基础用法参考 demo/text-time/text-time.uvue。

<template>
	<view class='p-15'>
		<tui-theme-switch></tui-theme-switch>
		<t-card title="Text 文本"
				class="mb-15"
				sub-title="丰富的主题色,支持日期格式化,敏感信息隐藏,金额格式化处理,高亮文本显示,且支持插槽高亮显示">
		</t-card>
		<t-section title="主题颜色"
				   class='mb-15' />
		<view :class="[`mb-15 r-10 p-10 tvg`]">
			<t-text-time type="success"
						 class="mb-8"
						 format='hh:MM:ss'>5000</t-text-time>
			<t-text-time type="success"
						 class="mb-8"
						 :format="format">{{time}}</t-text-time>
		</view>
		<t-button type="primary"
				  @click="test">变量测试</t-button>
	</view>
</template>

<script setup>
	const time = ref(50000)
	const format = ref('d天h时M分s秒')
	function test() {
		format.value = 'hh:MM:ss'
		time.value = 5000
	}
</script>

t-text-time Props

属性名	说明	类型	默认值
text	需要格式化的秒数	string | number	''
format	时间格式化格式	string	'd天h时M分s秒'
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	true
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	''
size	组件尺寸，可选 large、medium、small、mini	string	'medium'

时间格式说明

占位符	说明	示例（3661秒）
d	天数	0
h	小时数	1
M	分钟数	1
s	秒数	1

t-text-time Events

事件名	说明	回调参数
click	点击时触发	event
initFinished	组件初始化完成触发	组件节点信息
touchstart	触摸开始时触发	event
touchend	触摸结束时触发	event
touchmove	触摸移动时触发	event
touchcancel	触摸取消时触发	event