Parse 富文本解析器

Parse 富文本解析器 1.5.3 相同点：

• 二者都能解析HTML字符串

不同点：

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

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

提示

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

平台差异说明

基本使用

通过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文档

API

Props

Event