uniapp 点击 富文本元素 图片 可以预览（非nvue）

我使用的是uniapp 官方推荐的组件 rich-text，一般我能用官方级用官方，更有保障一些。

一、整体逻辑

1. 定义一段html标签字符串，里面包含图片

2. 将字符串放入rich-text组件中，绑定点击事件@itemclick

3. 通过点击事件获取到图片url路径，使用uni 提供的预览图片 和 保存图片API
 

注意：这是在vue文件下，在nvue无效，避免在nvue实现该功能。

<template>
	<rich-text :nodes="strHtml" @itemclick="handleRich"></rich-text>
</template>

<script setup>
	//定义测试的html字符串
	let strHtml = `
		<div><p>一般完成Java的基础语法和JavaSe部分已经Spring boot框架后，就可以开始工作，在工作中不断实践拓展提高自己的技术能力</p><img  src="https://img0.baidu.com/it/u=265713382,944125301&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" width="300" height="300" /></div>
	`;
	//处理点击事件
	const handleRich = (e)=>{
		// console.log(e.detail.node.attrs.src,e);
		let imgPath = e.detail.node.attrs.src;
		handlePreViewImage(imgPath);
	}
	//预览和长按保存图片
	const handlePreViewImage = (imgPath)=>{
		let arr = [];
		arr.push(imgPath);
		uni.previewImage({
			urls: arr,
			longPressActions: {
				itemList: ['保存图片到相册'],
				success: function(data) {
					console.log(data.tapIndex);
					if(data.tapIndex == 0){
						uni.saveImageToPhotosAlbum({
							filePath: imgPath,
							success: function () {
								uni.showToast({
									title: '保存成功',
									duration: 2000
								});
							}
						});
					}
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			}
		});
	}
	
</script>

<style scoped lang="scss">
</style>