uview-ultra v4

Appearance

Parse 富文本解析器 ​

该组件一般用于富文本解析场景，比如解析文章内容，商品详情，带原生HTML标签的各类字符串等，此组件和uni-app官方的rich-text组件功能有重合之处，但是也有不同的地方。

相同点： ​

  • 二者都能解析HTML字符串

不同点： ​

  • 对于轻量、简单的字符串，rich-text性能更好
  • 对于复杂的字符串，使用parse组件效果更好，有更多的自定义属性和效果

总结：如果是简单的场景，比如一段简单的文字和图片内容，可以优先使用rich-text组件，在文章内容，商品详情等复杂的文本详情，可以优先使用parse组件。

提示

此组件源于开源的优秀作品mp-html，本文档只对重要的功能进行介绍，如果需要更详细的说明，请参考mp-html官方文档。

平台差异说明 ​

App（vue）App（nvue）H5小程序
√√√√

基本使用 ​

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

html
<template>
	<view class="up-content">
		<up-parse :content="content"></up-parse>
	</view>
</template>
js
<script setup>  
import { ref } from 'vue';  
  
// 创建响应式数据  
const content = ref(`  
	<p>露从今夜白，月是故乡明</p>  
	<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" alt="Image Description" />  
`);  
</script>
js
<script>
	export default {
		data() {
			return {
				content: `
					<p>露从今夜白，月是故乡明</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`
			}
		},
	}
</script>
css
<style lang="scss" scoped>
    .up-content {
        padding: 24rpx;
    }
</style>

长按复制 ​

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

html
<up-parse :content="content" :selectable="true"></up-parse>

设置样式 ​

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

  • 通过组件的tagStyle参数可以精细化的对单独的标签设置样式，注意此方式设置的样式为字符串的形式，而非对象形式：
html
<template>
	<view class="up-content">
		<up-parse :content="content" :tagStyle="style"></up-parse>
	</view>
</template>
js
<script setup>  
import { ref } from 'vue';  
  
// 创建响应式数据  
const paragraphText = ref('露从今夜白，月是故乡明');  
const imageSrc = ref('https://cdn.uviewui.com/uview/swiper/2.jpg');  
  
// 样式对象，可以直接绑定到元素上  
const styles = {  
  p: {  
    color: 'red',  
    fontSize: '32rpx'  
  },  
  span: {  
    fontSize: '30rpx'  
  }  
};  
</script>
js
<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>
  • 通过父元素标签，统一设置全文的颜色，行高，字体大小等，注意这种方式无法对单独的标签设置样式：
html
<template>
	<view class="up-content">
		<up-parse :content="content"></up-parse>
	</view>
</template>
js
<script setup>  
import { ref } from 'vue';  
  
// 创建响应式数据  
const content = ref(`  
	<p>露从今夜白，月是故乡明</p>  
	<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />  
`);  
</script>
js
<script>
	export default {
		data() {
			return {
				content: `
					<p>露从今夜白，月是故乡明</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`
			}
		},
	}
</script>
css
<style lang="scss" scoped>
    .up-content {
        padding: 24rpx;
        font-size: 32rpx;
        color: $up-content-color;
        line-height: 1.6;
    }
</style>

懒加载和占位图 ​

  • 设置lazyLoad为true即可开启图片懒加载功能
  • 设置loadingImg为网络路径或者base64图片，可以在图片加载完成前展示占位图
html
<up-parse :content="content" :lazyLoad="true" :loadingImg="/xxx/xxx.jpg"></up-parse>

链接跳转/锚点 ​

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

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

其他配置 ​

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


右侧演示页面源代码地址 ​

点击以下链接以查看右侧演示页面的源码


 github  gitee

API ​

Props ​

参数说明类型默认值可选值
bgColor背景颜色，只适用与APP-PLUS-NVUE(已废弃)String--
containerStyle样式设置代替bgColorString--
content要显示的富文本字符串String--
copyLink是否允许外部链接被点击时自动复制Booleantruefalse
domain主域名，设置后将给链接自动拼接上主域名或协议名String--
errorImg图片出错时的占位图链接String--
lazyLoad是否开启图片懒加载，nvue不支持此属性Booleantruefalse
loadingImg图片加载完成前的占位图，详见 占位图String--
pauseVideo是否在播放一个视频时自动暂停其它视频Booleantruefalse
previewImg是否开启图片被点击时自动预览Booleantruefalse
scrollTable是否自动给 table 添加一个滚动层（使表格可以单独横向滚动）Booleanfalsetrue
selectable是否开启长按复制内容Booleanfalsetrue
setTitle是否自动将 title 标签的内容设置到页面标题Booleantruefalse
showImgMenu是否开启图片被长按时显示菜单Booleantruefalse
tagStyle设置标签的默认样式Object--
useAnchor是否使用页面内锚点Boolean/Numberfalsetrue

Event ​

事件名说明回调参数
loaddom 加载完成时触发所有节点被添加到节点树中时触发，无返回值，可以调用 api
ready渲染完成时触发返回 boundingClientRect 的查询结果（包含宽高、位置等信息），所有图片（除懒加载）加载完成时才会触发，图片较大时可能 延时较长
error出错时触发返回一个 object，其中 source 是错误来源，errMsg 为错误信息，target 包含出错标签的具体信息
imgTap图片被点击时触发返回一个 object，其中 src 是图片链接，ignore 是一个函数，在事件中调用将不进行预览；可用于阻挡 onShow 的调用
linkTap在链接被点击时触发返回一个 object，其中包含了被点击的 a 标签的所有属性，ignore 是一个函数，在事件中调用后将不自动跳转/复制；可在该事件中进行下载文档等进一步操作