本文主要是介绍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>
这篇关于uniapp 点击 富文本元素 图片 可以预览（非nvue）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
