Parse 富文本解析器 | uView - 多平台快速开发的UI框架

# Parse 富文本解析器 1.5.3

该组件一般用于富文本解析场景，比如解析文章内容，商品详情，带原生HTML标签的各类字符串等，此组件和uni-app官方的rich-text组件功能有重合之处，但是也有不同的地方。

# 相同点：

二者都能解析HTML字符串

# 不同点：

对于轻量、简单的字符串，rich-text性能更好
对于复杂的字符串，使用parse组件效果更好，有更多的自定义属性和效果

总结：如果是简单的场景，比如一段简单的文字和图片内容，可以优先使用rich-text组件，在文章内容，商品详情等复杂的文本详情，可以优先使用parse组件。

提示

此组件源于开源的优秀作品Parser (opens new window)，本文档只对重要的功能进行介绍，如果需要更详细的说明，请参考Parser (opens new window)官方文档。

# 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

# 基本使用

通过html参数绑定需要解析的内容即可。

<template>
	<view class="u-content">
		<u-parse :html="content"></u-parse>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: `
					<p>露从今夜白，月是故乡明</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`
			}
		},
	}
</script>

<style lang="scss" scoped>
	.u-content {
		margin-top: 100rpx;
	}
</style>

# 长按复制

可以通过设置selectable参数为true来实现长按复制的效果

<u-parse :html="content" :selectable="true"></u-parse>

# 设置样式

可以有两种方法可设置富文本的样式：

通过组件的tag-style参数可以精细化的对单独的标签设置样式，注意此方式设置的样式为字符串的形式，而非对象形式：

<template>
	<view class="u-content">
		<u-parse :html="content" :tag-style="style"></u-parse>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: `
					<p>露从今夜白，月是故乡明</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`,
				style: {
					// 字符串的形式
					p: 'color: red;font-size:32rpx',
					span: 'font-size: 30rpx'
				}
			}
		},
	}
</script>

通过父元素标签，统一设置全文的颜色，行高，字体大小等，注意这种方式无法对单独的标签设置样式：

<template>
	<view class="u-content">
		<u-parse :html="content"></u-parse>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: `
					<p>露从今夜白，月是故乡明</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`
			}
		},
	}
</script>

<style lang="scss" scoped>
	.u-content {
		margin-top: 100rpx;
		color: $u-content-color;
		font-size: 32rpx;
		line-height: 1.8;
		
		// 标签形式无效
		p {
			color: $u-tips-color;
		}
	}
</style>

# 懒加载和占位图

设置lazy-load为true即可开启图片懒加载功能
设置loading-img为网络路径或者base64图片，可以在图片加载完成前展示占位图

<u-parse :html="content" :lazy-load="true" :loading-img="/xxx/xxx.jpg"></u-parse>

# 渐变动画

设置show-with-animation为true，可以让内容展示时，获得一个淡入的效果。

<u-parse :html="content" :show-with-animation="true"></u-parse>

# 图片预览

无需配置，点击图片，即可获得图片预览功能

# 链接跳转

H5、App（含NVUE）外链可以直接打开，小程序端将自动复制链接
小程序端a标签设置app-id后可以跳转到其他小程序

# 其他配置

本组件还有其他更多的配置功能，如获取页面的所有图片数组，跳转页内锚点，视频播放等，如需更多的配置信息，请移步parser插件文档：parser文档 (opens new window)

# API

# Props

参数	说明	类型	默认值	可选值
html	要显示的 html 字符串	String	-	-
autopause	是否允许播放视频时自动暂停其他视频	Boolean	true	false
autoscroll	是否自动给 table 加一个滚动层（使表格可以单独滚动）	Boolean	false	true
autosetTitle	是否自动将 title 标签的内容设置到页面标题	Boolean	true	false
compress	压缩等级，可以选择是否移除 id 和 class(不建议修改)	Number	0	1 / 2 / 3
domain	主域名，设置后将给链接自动拼接上主域名或协议名	String	-	-
lazy-load	是否开启图片懒加载	Boolean	false	true
loading-img	图片加载完成前的占位图，详见占位图	String	-	-
selectable	是否允许长按复制内容	Boolean	false	true
show-with-animation	是否使用渐显动画	Boolean	false	true
tag-style	设置标签的默认样式	Object	-	-
use-anchor	是否使用页面内锚点	Boolean	false	true
use-cache	是否使用缓存，设置后多次打开不用重复解析	Boolean	false	true

# Event

事件名	说明	回调参数
parse	解析完成时触发	返回解析结果，可以对该结果进行自定义修改，将在渲染时生效
load	dom 加载完成时触发	所有节点被添加到节点树中时触发，无返回值，可以调用 api
ready	渲染完成时触发	返回 boundingClientRect 的查询结果（包含宽高、位置等信息），所有图片（除懒加载）加载完成时才会触发，图片较大时可能延时较长
error	出错时触发	返回一个 object，其中 source 是错误来源，errMsg 为错误信息，target 包含出错标签的具体信息
imgtap	图片被点击时触发	返回一个 object，其中 src 是图片链接，ignore 是一个函数，在事件中调用将不进行预览；可用于阻挡 onShow 的调用
linkpress	在链接被点击时触发	返回一个 object，其中包含了被点击的 a 标签的所有属性，ignore 是一个函数，在事件中调用后将不自动跳转/复制；可在该事件中进行下载文档等进一步操作

← Section 查看更多 MessageInput 验证码输入 →