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

曾经终败给现在 2024-04-22 15:19 20阅读 0赞

> 我使用的是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>