rich-text

rich-text 兼容性

支持的HTML标签和属性

属性

事件

UniRichTextItemClickEvent

# rich-text

组件类型：UniRichTextElement

富文本。可渲染文字样式、图片、超链接。支持部分HTML标签

# rich-text 兼容性

Android	iOS	web
3.9	4.11	4.0

# 支持的HTML标签和属性

HTML	属性	样式
br
p		text-align color background-color text-decoration
ul
li		text-align color background-color text-decoration
span		color background-color text-decoration
strong
i
big
small
a	href
u
del
h1-h6
img	src

text-decoration仅支持line-through

# 属性

名称	类型	默认值	描述
nodes	array \| string	-	节点列表 \| HTML String
selectable	boolean	false	文本是否可选
@itemclick	(event: UniRichTextItemClickEvent) => void	-	拦截点击事件（只支持 a、img标签），返回用户自定义数据或img标签的src属性或a标签的href属性。event.detail={ ref \| src \| href }

# 事件

# UniRichTextItemClickEvent

# UniRichTextItemClickEvent 的属性值

名称

类型

必填

默认值

描述

detail

UniRichTextItemClickEventDetail

是

名称	类型	必备	默认值	描述
ref	string \| null	否	-	自定义数据
src	string \| null	否	-	<img/>图片链接
href	string \| null	否	-	<a/>超链接

bubbles

boolean

是

是否冒泡

cancelable

boolean

是

是否可以取消

type

string

是

事件类型

target

UniElement | null

否

UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

currentTarget

UniElement | null

否

UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

timeStamp

number

是

事件发生时的时间戳

# UniRichTextItemClickEvent 的方法

名称	类型	必填	默认值	描述
stopPropagation	() => void	是	-	阻止当前事件的进一步传播
preventDefault	() => void	是	-	阻止当前事件的默认行为

# rich-text 属性兼容性

	Android	iOS	web
nodes	3.9	4.11	4.0
selectable	3.9	4.11	4.0
@itemclick	3.9	4.11	-

# 示例

hello uni-app x

Template

Script

<template>
  <view>
    <page-head title="rich-text"></page-head>
    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-btn-v">
        <navigator url="/pages/component/rich-text/rich-text-tags">
          <button type="primary">rich-text渲染单个HTML标签示例</button>
        </navigator>
      </view>
      <view class="uni-btn-v">
        <navigator url="/pages/component/rich-text/rich-text-complex">
          <button type="primary">rich-text渲染复杂HTML示例</button>
        </navigator>
      </view>
      <view class="uni-title">
        <text class="uni-subtitle-text">selectable</text>
      </view>
      <view class="text-box">
        <rich-text :selectable="true"
          nodes="<span>hello uni-app x!</span><br/><span>uni-app x，终极跨平台方案</span>"></rich-text>
      </view>
    </view>
  </view>
</template>



<style>
  .text-box {
    padding: 20px 0;
    background-color: white;
  }
</style>