Text 文本 1.2

手机扫码预览

21:26



---

组件名：rice-text

如果只是简单的文字显示，直接使用 uni-app x 的<text> 组件即可

平台兼容性

uni-app x

Android	Android(Vapor)	iOS	iOS(Vapor)	HarmonyOS	HarmonyOS(Vapor)	微信小程序	h5
√	√	√	√	√	√	√	√

基础用法

通过 text 属性设置要显示的文本内容

<rice-text text="床前明月光，疑是地上霜。" @click="handleClick" />

主题颜色

支持 primary success warning error 和 info 5种主题

<rice-text type="primary" text="主色" />
<rice-text type="success" text="成功" style="margin: 0 12px;" />
<rice-text type="warning" text="警告" />
<rice-text type="error" text="错误" style="margin: 0 12px;" />
<rice-text type="info" text="信息" />

修饰线

decoration 设置文本的修饰线类型

<rice-text text="床前明月光，疑是地上霜。" decoration="underline" />
<rice-text text="床前明月光，疑是地上霜。" decoration="line-through" type="error" />
<rice-text text="床前明月光，疑是地上霜。" decoration="underline" type="warning" />

前后图标

• prefix-icon 设置前置图标
• suffix-icon 设置后置图标

<rice-text text="扫一扫" prefix-icon="scan" />
<rice-text text="下载" type="error" suffix-icon="download"/>

显示省略号

设置 lines 可以控制文字超出时显示省略号，默认值为 -1 ，表示不限制

<rice-text :text="value" :lines="1" />
<rice-text :text="value" :lines="1" prefix-icon="star-fill" suffix-icon="search" type="warning"  />
<rice-text :text="value" :lines="2" type="success" />

自定义样式

• text-class 可以设置文字的样式，注意：小程序平台不能写在 scoped 里面，如样式不生效，需要添加 !important
• prefix-icon-style 可以设置前置图标的样式
• suffix-icon-style 可以设置后置图标的样式

<template>
<rice-text text="床前明月光，疑是地上霜。" text-class="text-class" />
<rice-text text="下载" type="error" prefix-icon="chat" suffix-icon="download" :prefix-icon-style="{color:'green'}"
  :suffix-icon-style="{fontSize:'18px'}"  />
</template>

<!-- 小程序平台不能写在 scoped 里面 -->
<style>
.text-class {
  color: red !important;
  font-size: 14px !important;
  font-weight: bold;
}
</style>

API

Props

属性名	类型	说明	默认值
text	String/Number	显示的文本
type	String	颜色主题，可选： primary/success/warning/error/info	default
lines	Number	最大显示行数，超出会显示省略号,-1表示不限制	-1
decoration	String	设置文本的修饰线类型，可选underline（下划线）/line-through（贯穿文本中间的修饰线）	none
url	String	需要跳转的页面链接
text-class	String	自定义文本的class类名
prefix-icon	String	文字前置的图标
suffix-icon	String	文字后置的图标
prefix-icon-style	UTSJSONObject	前置图标的style样式
suffix-icon-style	UTSJSONObject	后置图标的style样式

Events

事件名	说明	回调参数
click	点击事件

类型定义

组件导出如下类型

// 组件类型
const textRef = ref<RiceTextComponentPublicInstance | null>(null)