uv-ui

# Parse 富文本解析器

✈

组件名：uv-parse

点击下载&安装 (opens new window)

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

# 相同点：

  • 二者都能解析HTML字符串

# 不同点：

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

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

提示

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

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

注意事项

为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

  1. 如果你是npm安装方式 + app-nvue（其他可忽略），则需要注意static目录下需要创建相应的uv-parse文件，可以到uv-ui-npm项目去复制：https://gitee.com/climblee/uv-ui-npm/tree/master/static (opens new window)

# 基本使用

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

<template>
	<view class="uv-content">
		<uv-parse :content="content"></uv-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>
    .uv-content {
        padding: 24rpx;
    }
</style>

# 长按复制

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

<uv-parse :content="content" :selectable="true"></uv-parse>

# 设置样式

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

  • 通过组件的tagStyle参数可以精细化的对单独的标签设置样式，注意此方式设置的样式为字符串的形式，而非对象形式：
<template>
	<view class="uv-content">
		<uv-parse :content="content" :tagStyle="style"></uv-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="uv-content">
		<uv-parse :content="content"></uv-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>
    .uv-content {
        padding: 24rpx;
        font-size: 32rpx;
        color: $uv-content-color;
        line-height: 1.6;
    }
</style>

# 懒加载和占位图

  • 设置lazyLoad为true即可开启图片懒加载功能
  • 设置loadingImg为网络路径或者base64图片，可以在图片加载完成前展示占位图
<uv-parse :content="content" :lazyLoad="true" :loadingImg="/xxx/xxx.jpg"></uv-parse>

# 链接跳转/锚点

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

<a href="#">跳转到顶部</a>
<a href="#list">跳转到列表</a>
<a href="https://www.uvui.cn">外部链接</a>
<a href="/pages/demo/demo">内部链接</a>

# 其他配置

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


# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# Parse Props

参数 说明 类型 默认值 可选值
container-style 1.0.3 容器的样式 String - -
content 用于渲染的 html 字符串 String - -
copy-link 是否允许外部链接被点击时自动复制 Boolean true true | false
domain 主域名（用于链接拼接） String - -
error-img 图片出错时的占位图链接 String - -
lazy-load 是否开启图片懒加载 Boolean false true | false
loading-img 图片加载过程中的占位图链接 String - -
pause-video 是否在播放一个视频时自动暂停其他视频 Boolean true true | false
preview-img 是否开启图片被点击时自动预览 Boolean true true | false
scroll-table 是否给每个表格添加一个滚动层使其能单独横向滚动 Boolean false true |false
selectable 是否开启长按复制内容 Boolean false true
set-title 是否将 title 标签的内容设置到页面标题 Boolean true true |false
show-img-menu 是否允许图片被长按时显示菜单 Boolean true true |false
tag-style 设置标签的默认样式 Object - -
use-anchor 是否使用锚点链接 Boolean false true |false

# Parse Events

事件名 说明 回调参数
@load dom 树加载完成时触发 所有节点被添加到节点树中时触发，无返回值，可以调用 api
@ready 渲染完成时触发 返回 boundingClientRect 的查询结果（包含宽高、位置等信息），所有图片（除懒加载）加载完成时才会触发，图片较大时可能 延时较长
@error 出错时触发 返回一个 object，其中 source 是错误来源，errMsg 为错误信息，target 包含出错标签的具体信息
@imgtap 图片被点击时触发 返回一个 object，其中 src 是图片链接。可以在 img 标签 设置 ignore="1" 在事件中调用将不进行预览
@linktap 在链接被点击时触发 返回一个 object，其中包含了被点击的 a 标签的所有属性。如果需要链接不进行跳转/复制等操作，可以在 a 标签设置href="javascript:;"。可在该事件中进行下载文档等进一步操作
@play 音视频播放时触发 -

← Overlay 遮罩层 →