# 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 是一个函数,在回调中调用将不自动跳转/复制;开发者可以在该回调中进行进一步操作,如下载文档和打开等