富文本的图片添加点击放大功能

简介: 思路:富文本加载后,dom出全部img元素,然后各自单独添加点击事件

核心代码
const fun=function(e){
_this.img=this.src
_this.imgVisible=true
}
setTimeout(() => {
const container=document.querySelector('.ql-editor')
const imgs=container.querySelectorAll('img')
this.imgUrls=[]
var imgArr=[]
for(var i=0;i<imgs.length;i++){
var img=imgs[i]
imgArr.push(img.src)
img.addEventListener("click",fun.bind(img)) //通过bind函数,把img元素传进去点击事件中,在点击事件中,通过this获取到该参数
}
this.imgUrls=imgArr
},2000)

知识扩展
image.png

目录
相关文章
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
【前端系列】- 富文本组件(mavon-editor)
mavon-editor是一款基于vue的markdown编辑器,可以用来做文本的编辑,比如是某种业务需要发送公告、个人博客等,都可以用到,操作也十分简单。
4467 0
【前端系列】- 富文本组件(mavon-editor)
解决Git中fatal: refusing to merge unrelated histories
Git的报错 在使用Git的过程中有时会出现一些问题,那么在解决了每个问题的时候,都需要去总结记录下来,下次不再犯。 一、fatal: refusing to merge unrelated histories 今天在使用Git创建项目的时候,在两个分支合并的时候,出现了下面的这个错误。
109314 6
java依赖冲突解决问题之NoClassDefFoundError异常如何解决
java依赖冲突解决问题之NoClassDefFoundError异常如何解决
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
2327 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
9月前
|
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
1702 0
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
本文介绍了在微信小程序中使用`towxml`库将Markdown格式文本渲染为WXML的方法。文章提供了`towxml`的概述、安装步骤、以及如何在小程序中配置和使用`towxml`进行Markdown解析的详细说明和代码示例。
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
1201 0
java制作海报一:java使用Graphics2D 在图片上写字,文字换行算法详解
这篇文章介绍了如何在Java中使用Graphics2D在图片上绘制文字,并实现自动换行的功能。
479 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问