Tui Plus Vapor

Appearance

t-text-light ​

TextLight 高亮文本

组件介绍 ​

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

平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

基础用法 ​

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

vue
<template>
  <view class="text-light-demo">
    <!-- 关键词高亮 -->
    <t-text-light 
      text="这是一段需要高亮显示的文本内容" 
      :patternsValue="['高亮', '文本']">
    </t-text-light>
    
    <!-- 自定义高亮颜色 -->
    <t-text-light 
      text="自定义高亮颜色示例" 
      :patternsValue="['自定义']"
      patternsColor="#2979ff">
    </t-text-light>
    
    <!-- 正则表达式匹配 -->
    <t-text-light 
      text="电话号码：13800138000，邮箱：test@example.com" 
      :patternsReg="['\\d{11}', '\\w+@\\w+\\.\\w+']">
    </t-text-light>
    
    <!-- 点击选中 -->
    <t-text-light 
      text="点击高亮文字可触发事件" 
      :patternsValue="['高亮文字']"
      @select="onSelect">
    </t-text-light>
  </view>
</template>

<script setup>
function onSelect(text) {
  console.log('选中的文本:', text);
}
</script>

<style scoped>
.text-light-demo {
  padding: 40rpx;
}
</style>

Props ​

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

Events ​

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