该组件一般用于富文本解析场景，比如解析文章内容，商品详情，带原生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参数可以精细化的对单独的标签设置样式，注意此方式设置的样式为字符串的形式，而非对象形式：
<template> <view class="u-content"> <u-parse :content="content" :tagStyle="style"></u-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>
copy
- 通过父元素标签，统一设置全文的颜色，行高，字体大小等，注意这种方式无法对单独的标签设置样式：
<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; font-size: 32rpx; color: $u-content-color; line-height: 1.6; } </style>
copy
#懒加载和占位图
- 设置
lazyLoad为true即可开启图片懒加载功能 - 设置
loadingImg为网络路径或者base64图片，可以在图片加载完成前展示占位图
<u-parse :content="content" :lazyLoad="true" :loadingImg="/xxx/xxx.jpg"></u-parse>
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文档
