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

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

目录
相关文章
爬取图片,以及对图片筛选,以及切换系统背景图片
爬取图片,以及对图片筛选,以及切换系统背景图片
|
6月前
Elementui-Image组件,单个图片点击放大展示
Elementui-Image组件,单个图片点击放大展示
261 2
|
5月前
|
前端开发 C++
css 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片
css 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片
62 0
|
6月前
ueditor1.5 百度富文本 编辑器增加字间距功能及按钮
ueditor1.5 百度富文本 编辑器增加字间距功能及按钮
89 0
|
7月前
点击富文本部分文字跳转功能
点击富文本部分文字跳转功能
103 0
|
7月前
|
索引
【sgPhotoPlayer】自定义组件:图片预览,支持点击放大、缩小、旋转图片
【sgPhotoPlayer】自定义组件:图片预览,支持点击放大、缩小、旋转图片
|
Web App开发 移动开发 前端开发
移动端图片操作(二)——预览、旋转、合成
在上一节中已经提到了预览,预览可以通过data: URL格式或URL对象。
移动端图片操作(二)——预览、旋转、合成
|
定位技术
百度标注地图markers图片icon不正常显示的样式冲突解决方案
百度标注地图markers图片icon不正常显示的样式冲突解决方案
196 0
图片和文件预览组件(部分源码),可拖动,缩小,放大。 #41
图片和文件预览组件(部分源码),可拖动,缩小,放大。 #41
152 0
|
小程序 前端开发
微信小程序_自定义markdown的图片点击放大处理
微信小程序_自定义markdown的图片点击放大处理
409 0