RcText 文本组件

RcText 是一个功能丰富的文本展示组件，提供多种主题样式、尺寸规格、特殊显示模式和灵活的自定义选项。

功能特性

• ✅ 支持 6 种主题色：default、primary、success、warning、danger、info
• ✅ 提供 3 种尺寸：large、default、small
• ✅ 支持单行和多行文本截断（省略号）
• ✅ 支持价格、手机号、链接等特殊显示模式
• ✅ 支持前置/后置图标
• ✅ 支持文本装饰（下划线、删除线）
• ✅ 支持自定义颜色、字体大小、行高等样式
• ✅ 支持文本对齐方式
• ✅ 支持文本选中复制
• ✅ 支持点击事件

基础用法

普通文本

RcText({ text: '这是一段普通文本' })

主题色文本

RcText({ text: '主色文本', type: 'primary' })
RcText({ text: '成功文本', type: 'success' })
RcText({ text: '警告文本', type: 'warning' })
RcText({ text: '危险文本', type: 'danger' })
RcText({ text: '信息文本', type: 'info' })

不同尺寸

RcText({ text: '大号文本', textSize: 'large' })
RcText({ text: '默认文本', textSize: 'default' })
RcText({ text: '小号文本', textSize: 'small' })

高级功能

文本截断

// 单行截断
RcText({ 
  text: '这是一段很长的文本内容，超出容器宽度会显示省略号', 
  truncated: true 
})

// 多行截断（最多显示 2 行）
RcText({ 
  text: '这是一段很长的文本内容，可以显示多行，超出指定行数会显示省略号', 
  maxLines: 2 
})

特殊显示模式

价格模式

// 显示为：¥1,234.56
RcText({ 
  text: '1234.56', 
  mode: 'price',
  type: 'danger'
})

手机号模式

// 显示为：138****8888
RcText({ 
  text: '13888888888', 
  mode: 'phone' 
})

链接模式

RcText({ 
  text: '点击访问官网', 
  mode: 'link',
  href: 'https://example.com',
  type: 'primary',
  textDecoration: 'underline',
  onTextClick: () => {
    console.log('链接被点击')
  }
})

图标配置

支持使用内置图标库（RcIcon）或自定义图片资源。

// 使用内置图标（图标名称）
RcText({ 
  text: '带前置图标', 
  prefixIcon: 'icon-houi_home_outline',
  iconSize: 20,
  iconColor: '#409eff'
})

// 使用自定义图片
RcText({ 
  text: '带前置图标', 
  prefixIcon: $r('app.media.icon_home'),
  iconSize: 20,
  iconColor: '#409eff'
})

// 后置图标
RcText({ 
  text: '带后置图标', 
  suffixIcon: 'icon-houi_arrow_ios_forward_outline',
  iconSize: 16
})

// 同时使用前后图标
RcText({ 
  text: '带双图标', 
  prefixIcon: 'icon-houi_star_outline',
  suffixIcon: 'icon-houi_chevron_right_outline',
  iconSize: 18
})

文本装饰

// 下划线
RcText({ 
  text: '下划线文本', 
  textDecoration: 'underline' 
})

// 删除线
RcText({ 
  text: '删除线文本', 
  textDecoration: 'line-through' 
})

自定义样式

RcText({ 
  text: '自定义样式文本',
  color: '#ff6600',
  fontSize: 20,
  fontWeight: 'bold',
  lineHeight: 30,
  textAlign: 'center',
  rcMargin: { top: 10, bottom: 10 },
  rcPadding: { left: 16, right: 16 }
})

文本选中

RcText({ 
  text: '长按可选中复制的文本', 
  selectable: true 
})

API 文档

Props

参数	说明	类型	可选值	默认值
text	显示的文本内容	string | number	-	''
type	文本主题类型	RcTextType	default | primary | success | warning | danger | info	default
textSize	文本尺寸	RcTextSize	large | default | small	default
color	自定义文本颜色	string | Resource	-	-
fontSize	自定义字体大小（优先级高于 textSize）	RcStringNumber	-	0
fontWeight	字体粗细	RcTextWeight	normal | bold | lighter | bolder | number	normal
textAlign	文本对齐方式	RcTextAlign	left | center | right | start | end	left
textDecoration	文本装饰	RcTextDecoration	none | underline | line-through	none
lineHeight	行高	RcStringNumber	-	0
maxLines	最大显示行数	number	-	0（不限制）
truncated	是否单行截断	boolean	-	false
mode	文本显示模式	RcTextMode	text | price | phone | link	text
href	链接地址（mode='link' 时有效）	string	-	''
selectable	是否可选中	boolean	-	false
prefixIcon	前置图标（支持 RcIcon 图标名或资源）	keyof RcIconDataType | ResourceStr	-	''
suffixIcon	后置图标（支持 RcIcon 图标名或资源）	keyof RcIconDataType | ResourceStr	-	''
iconSize	图标大小	RcStringNumber	-	16
iconColor	图标颜色	string | Resource	-	''（跟随文本颜色）
rcMargin	外边距	Padding | Length	-	0
rcPadding	内边距	Padding | Length	-	0
customStyle	自定义样式	string	-	''
onTextClick	点击事件回调	() => void	-	-

主题色预设

类型	颜色值	说明
default	#303133	默认深灰色
primary	#409eff	主色调蓝色
success	#67c23a	成功绿色
warning	#e6a23c	警告橙色
danger	#f56c6c	危险红色
info	#909399	信息灰色

尺寸预设

尺寸	字体大小
large	18vp
default	14vp
small	12vp

类型定义

// 文本类型
type RcTextType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'

// 文本尺寸
type RcTextSize = 'large' | 'default' | 'small'

// 文本对齐
type RcTextAlign = 'left' | 'center' | 'right' | 'start' | 'end'

// 文本装饰
type RcTextDecoration = 'none' | 'underline' | 'line-through'

// 显示模式
type RcTextMode = 'text' | 'price' | 'phone' | 'link'

// 字体粗细
type RcTextWeight = 'normal' | 'bold' | 'lighter' | 'bolder' | number

使用场景

1. 普通文本展示：标题、段落、说明文字等
2. 状态提示：成功、警告、错误等状态信息
3. 价格展示：商品价格、订单金额等
4. 隐私信息：手机号脱敏显示
5. 链接跳转：可点击的文本链接
6. 图标文本：带图标的标签、按钮文字等
7. 长文本处理：文章摘要、评论内容截断等

注意事项

1. fontSize 优先级高于 textSize，设置 fontSize 后 textSize 将失效
2. color 优先级高于 type 的主题色，设置 color 后 type 的颜色将失效
3. truncated 和 maxLines 同时设置时，maxLines 优先级更高
4. mode='link' 时建议配合 textDecoration='underline' 和 type='primary' 使用
5. 图标颜色默认跟随文本颜色，可通过 iconColor 单独设置
6. selectable 设置为 true 后，用户可以长按选中并复制文本
7. 图标支持使用 RcIcon 内置图标库（传入图标名称字符串）或自定义资源（传入 $r() 等资源路径）