# t-text-light

TextLight 高亮文本

t-text-light 组件介绍

t-text-light 是支持关键词高亮显示的文本组件，可以通过指定关键词或正则表达式来高亮匹配的内容，适用于搜索结果显示、敏感词标注等场景。

t-text-light 平台兼容

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

t-text-light 基础用法

基础用法参考 demo/text-light/text-light.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 fais tvg`]">
			<t-text-light :patternsValue="['重点内容', '电子邮件', '电话号码']"
						  type="success"
						  size="large">
				此文本组件能够突出显示关键词，如电子邮件地址、电话号码等，点击可以快速启动相关操作，如拨打电话或发送邮件。
			</t-text-light>
			<t-text-light class="mt-15" :patternsReg="patternsReg">
				点击电话号码: 15329438335 或 电子邮件: test@example-com，以触发相应操作
			</t-text-light>
		</view>
	</view>
</template>
<script setup>
	const patternsReg = ['\\b1[3456789]\\d{9}\\b','\\b[a-zA-Z0-9-_%+-]+@[a-zA-Z0-9--]+\\-[a-zA-Z]{2,}\\b']
</script>

t-text-light Props

属性名	说明	类型	默认值
text	显示的文本内容	string	''
patternsValue	需要高亮显示的文本数组	string[]	[]
patternsReg	自定义匹配高亮的正则表达式数组	string[]	[]
patternsColor	高亮文本的颜色	string	'#ff0000'
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	''
size	组件尺寸，可选 large、medium、small、mini	string	'medium'

t-text-light Events

事件名	说明	回调参数
click	点击时触发	event
select	点击高亮文本时触发	string（选中的文本）
initFinished	组件初始化完成触发	组件节点信息
touchstart	触摸开始时触发	event
touchend	触摸结束时触发	event
touchmove	触摸移动时触发	event
touchcancel	触摸取消时触发	event