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>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/100646.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TensorFlow学习:使用官方模型进行图像分类、使用自己的数据对模型进行微调

前言 上一篇文章 TensorFlow案例学习&#xff1a;对服装图像进行分类 中我们跟随官方文档学习了如何进行预处理数据、构建模型、训练模型等。但是对于像我这样的业余玩家来说训练一个模型是非常困难的。所以为什么我们不站在巨人的肩膀上&#xff0c;使用已经训练好了的成熟模…

VIT(Vision Transformer)学习-模型理解(一)

VIT (Vision Transformer) 模型论文代码(源码)从零详细解读&#xff0c;看不懂来打我_哔哩哔哩_bilibili VIT模型架构图 1.图片切分为patch 2. patch转化为embedding 1&#xff09;将patch展平为一维长度 2&#xff09;token embedding&#xff1a;将拉平之后的序列映射…

【ARM AMBA5 CHI 入门 12.1 -- CHI 链路层详细介绍 】

文章目录 CHI 版本介绍1.1 CHI 链路层介绍1.1.1 Flit 切片介绍1.1.2 link layer credit(L-Credit)机制1.1.3 Channel1.1.4 Port1.1. RN Node 接口定义1.1.6 SN Node 接口定义1.2 Channel interface signals1.2.1 Request, REQ, channel1.2.2 Response, RSP, channel1.2.3 Snoop…

如何找到新媒体矩阵中存在的问题?

随着数字媒体的发展&#xff0c;企业的新媒体矩阵已成为品牌推广和营销的重要手段之一。 然而&#xff0c;很多企业在搭建新媒体矩阵的过程中&#xff0c;往往会忽略一些问题&#xff0c;导致矩阵发展存在潜在风险&#xff0c;影响整个矩阵运营效果。 因此&#xff0c;找到目前…

二维离散傅里叶变换的实现

二维离散傅里叶变换的实现 1.使用Python包实现1.1 fftshift在numpy中的实现1.2 平移后的幅度谱 2.使用c实现之12.1 FFTW库安装2.2 结果比较 3.使用c实现之2参考文献 1.使用Python包实现 import numpy as np import matplotlib.pyplot as plt anp.array([0, 2, 4, 1,6, 1, 3, …

快速幂求逆元

思路 题意&#xff1a; 给出两个整数 a , p a,p a,p&#xff0c;其中 p p p 是质数&#xff0c;求出一个整数 b b b&#xff0c;使得 a ∗ b 1 ( m o d p ) a~*~b~~1(mod~p) a ∗ b 1(mod p) 成立&#xff08;即求 a a a 模 p p p 的乘法逆元&#xff09;。 首先我们…

澳大利亚教育部宣布ChatGPT将被允许在澳学校使用!

教育部长最近宣布&#xff0c;从 2024 年起&#xff0c;包括 ChatGPT 在内的人工智能将被允许在所有澳大利亚学校使用。 &#xff08;图片来源&#xff1a;卫报&#xff09; 而早些时候&#xff0c;澳洲各高校就已经在寻找与Chatgpt之间的平衡了。 之前&#xff0c;悉尼大学就…

leetCode 1035.不相交的线 动态规划 + 滚动数组 (最长公共子序列)

1035. 不相交的线 - 力扣&#xff08;LeetCode&#xff09; 在两条独立的水平线上按给定的顺序写下 nums1 和 nums2 中的整数。 现在&#xff0c;可以绘制一些连接两个数字 nums1[i] 和 nums2[j] 的直线&#xff0c;这些直线需要同时满足满足&#xff1a; nums1[i] nums2[j]…

vue3+elementplus+flask 文件夹上传

<div><input class"fileuploadclass" title"请选择文件夹" ref"file" id"submit" type"file"multiple name"" webkitdirectory change"folderModelOn"><el-button type"primary&qu…

冒泡排序/鸡尾酒排序

冒泡排序 冒泡排序&#xff08;Bubble Sort&#xff09;是一种简单的排序算法&#xff0c;它通过多次交换相邻元素的位置来实现排序。它的基本思想是从数组的第一个元素开始&#xff0c;比较相邻的两个元素&#xff0c;如果它们的顺序错误&#xff0c;则交换它们的位置。重复进…

蓝桥杯每日一题20233.10.10

题目描述 回文日期 - 蓝桥云课 (lanqiao.cn) 题目分析 对于此题&#xff0c;我们最先想到的是暴力解法&#xff0c;将每一种情况经行循环查找&#xff0c;在查找的过程中记录下答案&#xff0c;回文日期就是字符串判断回文&#xff0c;ABABBABA型回文日期可以将回文经行特判…

JVM源码剖析之Thread类中sleep方法

版本信息&#xff1a; jdk版本&#xff1a;jdk8u40 写在前面&#xff1a; 大部分的Java程序员知道让线程睡眠的方法是Thread.sleep方法&#xff0c;而这个方法是一个native方法&#xff0c;让很多想知道底层如何让线程睡眠的程序员望而却步。所以笔者特意写在这篇文章&#xf…

openGauss学习笔记-96 openGauss 数据库管理-访问外部数据库-file_fdw

文章目录 openGauss学习笔记-96 openGauss 数据库管理-访问外部数据库-file_fdw96.1 使用file_fdw96.2 注意事项 openGauss学习笔记-96 openGauss 数据库管理-访问外部数据库-file_fdw openGauss的fdw实现的功能是各个openGauss数据库及远程服务器&#xff08;包括数据库、文件…

沪深300期权一个点多少钱?

经中国证监会批准&#xff0c;深圳证券交易所于2019年12月23日上市嘉实沪深300ETF期权合约品种。该产品是以沪深300为标的物的嘉实沪深300ETF交易型指数基金为标的衍生的标准化合约&#xff0c;下文介绍沪深300期权一个点多少钱?本文来自&#xff1a;期权酱 一、沪深300期权涨…

PDF编辑和OCR文字识别工具ABBYY FineReader PDF

ABBYY FineReader PDF是一款专业的OCR文字识别和PDF编辑工具&#xff0c;可以帮助用户更好地处理和管理PDF文档。以下是ABBYY FineReader PDF的一些特点&#xff1a; 1. 文字识别精准&#xff1a;ABBYY FineReader PDF具有强大的OCR文字识别功能&#xff0c;可以将PDF中的文字…

C#导出本机Win32native dll

C# 使用 "3f/DllExport" 工具导出C风格的本机函数 [文 / 张赐荣] 首先&#xff0c;让我们来了解一下什么是争渡读屏软件&#xff0c;以及什么是争渡文本预处理API。争渡读屏软件是一款屏幕朗读软件&#xff0c;用于协助视力障碍人士操作电脑。 争渡文本预处理API是一…

java的amazonaws接口出现无法执行http请求:管道中断

java使用amazonaws的接口上传文件到minio出现以下异常&#xff1a; com.amazonaws.SdkClientException: Unable to execute HTTP request: Broken pipe (Write failed) at com.amazonaws.http.AmazonHttpClient R e q u e s t E x e c u t o r . h a n d l e R e t r y a b l e…

【广州华锐互动】灭火器使用VR教学系统应用于高校消防演练有什么好处?

在科技发展的大潮中&#xff0c;虚拟现实&#xff08;VR&#xff09;技术以其独特的沉浸式体验赢得了各个领域的青睐&#xff0c;其中包括教育和培训。在高校消防演练中&#xff0c;VR也成为了一种新的消防教育方式。 由广州华锐互动开发的VR消防演练系统&#xff0c;就包含了校…

神经网络(MLP多层感知器)

分类 神经网络可以分为多种不同的类型&#xff0c;下面列举一些常见的神经网络类型&#xff1a; 前馈神经网络&#xff08;Feedforward Neural Network&#xff09;&#xff1a;前馈神经网络是最基本的神经网络类型&#xff0c;也是深度学习中最常见的神经网络类型。它由若干个…

【工具软件】mediamtx——网页、vue3项目中播放 rtsp 视频流(支持265转码)

声明 本文只做 mediamtx 的使用实操&#xff0c;请务必参考下面的博客,&#xff0c;我也参考下面的大佬博客&#xff0c;感谢唯一602的无私分享&#xff1a; 在web页面中直接播放rtsp视频流&#xff0c;重点推荐&#xff1a;mediamtx&#xff0c;不仅仅是rtsp mediamtx 介绍 …