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

简介: 思路:富文本加载后,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

目录
相关文章
|
2月前
|
JavaScript
有关vue中两张图片,一个底图一个右上角的图片 点击右上角不触发底图方法
有关vue中两张图片,一个底图一个右上角的图片 点击右上角不触发底图方法
14 0
|
23天前
|
索引
【sgPhotoPlayer】自定义组件:图片预览,支持点击放大、缩小、旋转图片
【sgPhotoPlayer】自定义组件:图片预览,支持点击放大、缩小、旋转图片
uniapp上传预览大图-带删除按钮-摄像机-相册
uniapp上传预览大图-带删除按钮-摄像机-相册
点击视频播放切换隐藏--添加播放图片按钮
点击视频播放切换隐藏--添加播放图片按钮
|
Web App开发 移动开发 前端开发
移动端图片操作(二)——预览、旋转、合成
在上一节中已经提到了预览,预览可以通过data: URL格式或URL对象。
移动端图片操作(二)——预览、旋转、合成
|
11月前
图片和文件预览组件(部分源码),可拖动,缩小,放大。 #41
图片和文件预览组件(部分源码),可拖动,缩小,放大。 #41
90 0
|
11月前
|
JavaScript 前端开发 容器
手写图片拖拽、鼠标点位缩放
如题,无关技术背景,什么vue、react自己想用就用,这就是js加一点点css实现,意思就是可以任意迁。
142 0
|
11月前
|
小程序 前端开发
微信小程序_自定义markdown的图片点击放大处理
微信小程序_自定义markdown的图片点击放大处理
295 0
|
12月前
|
小程序 JavaScript
微信小程序图片放大预览效果的实现,轮播图点击放大预览
微信小程序图片放大预览效果的实现,轮播图点击放大预览
875 0
|
图形学
PPT制作三大技巧:图标 、图片背景透明和自动函数
PPT制作三大技巧:图标 、图片背景透明和自动函数
245 0
PPT制作三大技巧:图标 、图片背景透明和自动函数