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 = `
		
一般完成Java的基础语法和JavaSe部分已经Spring boot框架后，就可以开始工作，在工作中不断实践拓展提高自己的技术能力
	`;
	//处理点击事件
	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>