t-text

Text 文本

组件介绍

t-text 文本组件，支持日期格式化、敏感信息隐藏、金额格式化处理、高亮文本显示，且支持插槽高亮显示。

平台兼容

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

基础用法

基础用法参考 demo/text/text.uvue，通过 type 属性设置主题，使用 size 属性设置尺寸。

<template>
  <!-- 基础文本 -->
  <t-row class="trm tvg mb-30 tpm">
    <t-text class="mr-15" :hover="true">默认</t-text>
    <t-text class="mr-15" type="success">成功</t-text>
    <t-text class="mr-15" type="error">危险</t-text>
    <t-text class="mr-15" type="warning">警告</t-text>
    <t-text class="mr-15" type="primary">主色</t-text>
  </t-row>

  <!-- 不同尺寸 -->
  <t-row class="trm tvg mb-30 tpm">
    <t-text class="mr-15" size="large" type="success">large</t-text>
    <t-text class="mr-15" type="error" size="medium">medium</t-text>
    <t-text class="mr-15" type="error" size="small">small</t-text>
    <t-text class="mr-15" type="error" size="mini">mini</t-text>
  </t-row>

  <!-- 不同主题效果 -->
  <t-row class="trm tvg mb-30 tpm">
    <t-text effect="normal" class="mr-15" type="error">默认</t-text>
    <t-text effect="dark" class="mr-15" type="error">深色</t-text>
    <t-text effect="light" class="mr-15" type="error">浅色</t-text>
    <t-text effect="plain" class="mr-15" type="error">镂空</t-text>
  </t-row>

  <!-- 隐藏省略号 -->
  <t-col class="mb-30 r-20 bg-#fff p-20">
    <t-text type="warning" class="w-500 oh slh-100 l-1">
      这是一段很长的文本，用于测试单行超出隐藏的效果。
    </t-text>
  </t-col>
</template>

Props

属性名	说明	类型	默认值
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
hover	是否启用点击效果	boolean	true
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
mode	字符串格式化处理方式，可选 default、date、price、sensitive、light	string	'default'
format	mode=='date' 时日期格式化格式	string	'yyyy-mm-dd hh:MM:ss'
decimals	金额显示时显示小数点的位数	number	1
lines	文本显示的行数，超出就会隐藏	number	1
decimalPoint	金额表示符文本	string	'￥'
overflow	是否允许文本溢出	boolean	false
patternsValue	需要高亮显示文本的内容	any	[]
patternsReg	自定义匹配高亮正则表达	any	''
patternsColor	匹配高亮显示的文本颜色	string	'#ff0000'
text	显示的文本	string	''

size 说明

• large：大尺寸，文本的尺寸较大，适用于需要强调或易于阅读的区域
• medium：中尺寸，文本的尺寸适中，可能是默认尺寸，适用于大多数场景
• small：小尺寸，文本的尺寸较小，适用于空间有限或辅助信息
• mini：迷你，文本的尺寸最小，适用于紧凑布局或辅助操作

type 说明

• info：信息提示场景，通常用于提供一般的通知信息
• primary：正常使用场景，可能用于强调某些主要的操作或信息
• error：错误提示场景，用于指示出现了错误或问题
• warning：警告提示场景，用于提示用户关于潜在的问题
• success：成功提示场景，用于指示一个操作或过程已经成功完成

effect 说明

• normal：正常主题
• dark：深色主题
• light：浅色主题
• plain：镂空主题

mode 说明

• default：默认不处理
• date：处理为日期格式，配合 format 一起使用
• price：格式化为金额显示
• sensitive：隐藏敏感信息
• light：部分文本高亮显示

Events

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

Slots

插槽名	说明
default	默认插槽，用于设置文本内容