uVeiw Parse 富文本解析器

该组件一般用于富文本解析场景,比如解析文章内容,商品详情,带原生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 小程序

#基本使用

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

复制代码
<template>
	<view class="u-content">
		<u-parse :content="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 {
        padding: 24rpx;
    }
</style>

copy

#长按复制

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

复制代码
<u-parse :content="content" :selectable="true"></u-parse>

copy

#设置样式

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

  • 通过组件的tagStyle参数可以精细化的对单独的标签设置样式,注意此方式设置的样式为字符串 的形式,而非对象形式:

copy

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

copy

#懒加载和占位图

  • 设置lazyLoadtrue即可开启图片懒加载功能

  • 设置loadingImg为网络路径或者base64图片,可以在图片加载完成前展示占位图

copy

#链接跳转/锚点

H5、App(含NVUE)外链可以直接打开,小程序端将自动复制链接

小程序端a标签设置app-id后可以跳转到其他小程序

复制代码
<a href="#">跳转到顶部</a>
<a href="#list">跳转到列表</a>
<a href="https://github.com/jin-yufeng/mp-html">外部链接</a>
<a href="/pages/componentsB/parse/jump">内部链接</a>

copy

#其他配置

本组件还有其他更多的配置功能,如获取页面的所有图片数组,跳转页内锚点,视频播放等,如需更多的配置信息,请移步mp-html项目文档:mp-html文档

相关推荐
杨利杰YJlio7 分钟前
KB5121003更新详解:安全启动证书、AI组件、资源管理器与安装验证
前端·javascript·后端
紫菜猫一只10 分钟前
Vue 3 与 React 常用写法对比
前端
jinggongszh11 分钟前
使用AI协同开发产品条码规则功能——从“理解方案、原型、接口文档”到“落地真实前端代码”
前端·人工智能·mes系统·mes工程架构
渔夫正在掘金15 分钟前
Cordis 中文教程:渐进式构建插件化应用
前端·node.js·ai编程
打呵欠的猫23 分钟前
前端团队 3 个月 AI 实践复盘:哪些场景 ROI 最高,哪些是伪需求
前端·ai编程
gyx_这个杀手不太冷静1 小时前
高级前端开发职业规划(2026—2035)
前端·面试·agent
程序员黑豆1 小时前
Java中的null与NullPointerException完全指南:安全处理、实战排查与面试题
java·前端·ai编程
编程快车1 小时前
用 Phaser 4 造一个空间解谜游戏:纯函数棋盘引擎、透明画布分层与轻量双语
前端·程序员
lemon_yyds1 小时前
uVIew2 弹框滚动穿透问题-[uu-popup ]组件
vue.js
可视之道1 小时前
前端图形编辑器的多选框架:从单选到框选到 Shift 连选
前端