uniapp-rich-text(富文本中图片预览功能实现)

分类前端日期1年前访问1283评论0

使用rich-text渲染富文本,实现里面内容图片预览功能

//template里面的代码

<rich-text space='emsp' @click="点击事件" :data-nodes="数据" :nodes="数据" ></rich-text>

<rich-text :nodes="list.content"  :data-nodes="list.content"space="ensp" @click="showImg"></rich-text>

js里面的代码

// 富文本预览图片
     
		showImg(e){
			let contentimg=e.target.dataset.nodes;
			let imgs=contentimg.match(/<img[^>]+>/g);//把img所有节点的图片选择出来
			let arrImg=[];
			//遍历标签拼拿到你的图片的src里面的内容放在我们数组中
			for(var j=0;j<imgs.length;j++){
				imgs[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi,function(match,capture){
					arrImg.push(capture)
				})
			}
			//最后一步就是把我们的所有图片放在预览的api中就可以了
			uni.previewImage({
				current:arrImg,
				urls:arrImg,
			})
			
			
			
		},