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

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

目录
相关文章
|
11月前
|
JavaScript
有关vue中两张图片,一个底图一个右上角的图片 点击右上角不触发底图方法
有关vue中两张图片,一个底图一个右上角的图片 点击右上角不触发底图方法
65 0
爬取图片,以及对图片筛选,以及切换系统背景图片
爬取图片,以及对图片筛选,以及切换系统背景图片
|
10月前
Elementui-Image组件,单个图片点击放大展示
Elementui-Image组件,单个图片点击放大展示
351 2
|
9月前
|
前端开发 C++
css 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片
css 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片
100 0
|
11月前
|
索引
【sgPhotoPlayer】自定义组件:图片预览,支持点击放大、缩小、旋转图片
【sgPhotoPlayer】自定义组件:图片预览,支持点击放大、缩小、旋转图片
|
11月前
点击富文本部分文字跳转功能
点击富文本部分文字跳转功能
145 0
|
JavaScript
文字、图片左右无缝滚动效果--支持拖拽js效果demo效果示例(整理)
文字、图片左右无缝滚动效果--支持拖拽js效果demo效果示例(整理)
|
定位技术
百度标注地图markers图片icon不正常显示的样式冲突解决方案
百度标注地图markers图片icon不正常显示的样式冲突解决方案
276 0
图片和文件预览组件(部分源码),可拖动,缩小,放大。 #41
图片和文件预览组件(部分源码),可拖动,缩小,放大。 #41
201 0
|
小程序 前端开发
微信小程序_自定义markdown的图片点击放大处理
微信小程序_自定义markdown的图片点击放大处理
489 0