Parse 富文本解析器

该组件主要用于富文本解析场景，例如文章内容展示、商品详情呈现，或需要处理内嵌原生 HTML 标签的各种字符串。

• 相同点：

两者都能够解析 HTML 字符串。

• 不同点：

对于结构简单、内容轻量的 HTML 字符串，rich-text 组件的性能更优。而对于结构复杂、样式或标签较为繁复的字符串，parse 组件则表现更佳。它不仅支持更丰富的自定义属性，还能实现更多扩展效果。

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

通过 content 属性绑定需要解析的内容即可。

<template>
	<view class="page-content">
		<fu-parse :content="content"></fu-parse>
	</view>
</template>

<script setup>
    const content = `<p>从此不再平凡</p>`
</script>

<style lang="scss" scoped>
    .page-content {
        padding: 24rpx;
    }
</style>

设置长按复制

通过 selectable 属性设置为 true 实现长按复制的效果

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

设置样式

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

• 通过 tagStyle 属性可以精细化的对单独的标签设置样式，注意此方法设置的样式为字符串的形式，而非对象形式

<template>
	<view class="page-content">
		<fu-parse :content="content" :tagStyle="tagStyle"></fu-parse>
	</view>
</template>

<script setup>
    const content = `<p>从此不再平凡</p>`;
    const tagStyle = {
        // 字符串形式
        p: 'color: blue; font-size: 30rpx;',
        span: 'font-size: 28rpx'
    }
</script>

<style lang="scss" scoped>
    .page-content {
        padding: 24rpx;
    }
</style>

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

<template>
	<view class="page-content">
		<fu-parse :content="content" :tagStyle="tagStyle"></fu-parse>
	</view>
</template>

<style lang="scss" scoped>
    .page-content {
        padding: 24rpx;
        color: blue; 
        font-size: 30rpx;
        line-height: 2;
    }
</style>

设置懒加载和占位图

• 通过 lazyLoad 属性为 true 开启图片懒加载功能
• 通过 loadingImg 属性可以设置图片加载完成前展示的占位图，为网络路径或base64图片

<fu-parse :content="content" :lazyLoad="true" :loadingImg="/xxx/xxx.png"></fu-parse>

链接跳转 / 锚点

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

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

API

SignBoard Props

属性名	说明	类型	默认值	可选值
containerStyle	容器的样式	String	-	-
content	用于渲染的 html 字符串	String	-	-
copyLink	是否允许外部链接被点击时自动复制	Boolean	true	false
domain	主域名，用于拼接链接	String	-	-
errorImg	图片出错时的占位图链接	String	-	-
lazyLoad	是否开启图片懒加载	Boolean	false	true
loadingImg	图片加载过程中的占位图链接	String	-	-
pauseVideo	是否在播放一个视频时自动暂停其他视频	Boolean	true	false
previewImg	是否允许图片被点击时自动预览	Boolean	true	false
scrollTable	是否给每个表格添加一个滚动层使其能单独横向滚动	Boolean	false	true
selectable	是否开启长按复制	Boolean ｜String	false	true
setTitle	是否将 title 标签的内容设置到页面标题	Boolean	true	false
showImgMenu	是否允许图片被长按时显示菜单	Boolean	true	false
tagStyle	标签的默认样式	Object	-	-
useAnchor	是否使用锚点链接	Boolean	false	true

SignBoard Events

事件名	说明	回调参数
load	dom 树加载完成时触发	() => void
ready	渲染完成时触发	() => void
imgtap	图片被点击时触发	() => void
linktap	链接被点击时触发	() => void
play	音视频播放时触发	() => void
error	媒体加载出错时触发	() => void