rich-text

支持的HTML标签和属性

Attributes

Event

RichTextItemClickEvent

Example

Compatibility

# rich-text

Component Type：UniRichTextElement

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

# 支持的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

# # Attributes

name	type	default	description
nodes	Array\|string	-	节点列表 \| HTML String
selectable	boolean	false	文本是否可选
@itemclick	(event: RichTextItemClickEvent) => void	-	拦截点击事件（只支持 a、img标签），返回用户自定义数据或img标签的src属性或a标签的href属性。event.detail={ ref \| src \| href }

# # Event

# # RichTextItemClickEvent

# # RichTextItemClickEvent Values

name	type	required	default	description
detail	RichTextItemClickEventDetail	YES	-	-
type	string	YES	-	事件类型
target	Element	YES	-	触发事件的组件
currentTarget	Element	YES	-	当前组件
timeStamp	number	YES	-	事件发生时的时间戳

# # RichTextItemClickEventDetail Values

name	type	optinal	default	description
ref	string	NO	-	自定义数据
src	string	NO	-	<img/>图片链接
href	string	NO	-	<a/>超链接

# # RichTextItemClickEvent Methods

name	type	required	default	description
stopPropagation	() => void	YES	-	阻止当前事件的进一步传播
preventDefault	() => void	YES	-	阻止当前事件的默认行为

# # Example

hello uni-app x

<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>

<script>

</script>

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