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

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

目录
相关文章
|
3月前
|
前端开发 C++
css 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片
css 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片
35 0
|
5月前
点击富文本部分文字跳转功能
点击富文本部分文字跳转功能
65 0
|
5月前
|
索引
【sgPhotoPlayer】自定义组件:图片预览,支持点击放大、缩小、旋转图片
【sgPhotoPlayer】自定义组件:图片预览,支持点击放大、缩小、旋转图片
图片和文件预览组件(部分源码),可拖动,缩小,放大。 #41
图片和文件预览组件(部分源码),可拖动,缩小,放大。 #41
133 0
|
小程序 前端开发
微信小程序_自定义markdown的图片点击放大处理
微信小程序_自定义markdown的图片点击放大处理
361 0
|
图形学
PPT制作三大技巧:图标 、图片背景透明和自动函数
PPT制作三大技巧:图标 、图片背景透明和自动函数
281 0
PPT制作三大技巧:图标 、图片背景透明和自动函数
|
前端开发 开发者
首页-图标失真问题 |学习笔记
快速学习 首页-图标失真问题
|
JavaScript
使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片
使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片
263 0
使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片