RichText 富文本解析

一般用于富文本解析，例如新闻内容、文章内容、评论显示、推广信息等各类HTMl标签内容显示

申明

该组件来源于uni-app插件市场优秀的开源作品Parser富文本插件进行修剪添加部分属性

基本使用

通过 html 属性绑定解析内容

<template>
	<view>
		<n-rich-text :html="html" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				html: `<p>明月几时有？把酒问青天。不知天上宫阙，今夕是何年？</p>
					<img src='https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dnvue/ab109dd0-ee87-11ea-b680-7980c8a877b8.png' />`
			}
		}
	}
</script>
<style lang="scss">

</style>

长按复制内容

通过设置 selectable 属性为 true 控制是否长按复制内容

<n-rich-text :html="html" :selectable="true" />

设置样式

通过 tag-style 属性对标签设置对应的样式，参数为字符串形式

<template>
	<view>
		<n-rich-text :html="html" :tag-style="style" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				html: `<p>明月几时有？把酒问青天。不知天上宫阙，今夕是何年？</p>
					<img src='https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dnvue/ab109dd0-ee87-11ea-b680-7980c8a877b8.png' />`,
				style: {
					p: 'color: blue;font-size:28rpx',
					img: 'width:300rpx'
				}
			}
		}
	}
</script>
<style lang="scss">

</style>

控制富文本解析器宽度

通过设置 width 属性即可

<template>
	<view>
		<n-rich-text :html="html" width="300" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				html: `<p>明月几时有？把酒问青天。不知天上宫阙，今夕是何年？</p>
					<img src='https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dnvue/ab109dd0-ee87-11ea-b680-7980c8a877b8.png' />`
			}
		}
	}
</script>
<style lang="scss">

</style>

API

Attribute 属性

属性	说明	类型	可选值	默认值
html	要显示的 html 字符串	String	-	-
width	宽度(rpx)	String,Number	-	-
min-width	最大宽度(rpx)	String,Number	-	-
max-width	最小宽度(rpx)	String,Number	-	-
autopause	是否允许播放视频时自动暂停其他视频	Boolean	false	true
autoscroll	是否自动给 table 加一个滚动层（使表格可以单独滚动）	Boolean	true	false
autoset-title	是否自动将 title 标签的内容设置到页面标题上	Boolean	false	true
domain	主域名，设置后将对于图片地址将自动拼接主域名或协议名	String	-	-
selectable	是否允许长按复制内容	Boolean	true	false
tag-style	设置标签的默认样式	Object	-	-
show-with-animation	是否使用渐显动画	Boolean	true	false
use-anchor	是否使用页面内锚点	Boolean	true	false

Event 事件

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