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

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

目录
相关文章
|
JSON 定位技术 API
腾讯位置 - 逆地址解析(结尾附视频)
腾讯位置 - 逆地址解析(结尾附视频)
1906 0
|
JavaScript
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
3693 1
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
|
缓存 Linux 开发工具
CentOS 7- 配置阿里镜像源
阿里镜像官方地址http://mirrors.aliyun.com/ 1、点击官方提供的相应系统的帮助 :2、查看不同版本的系统操作: 下载源1、安装wget yum install -y wget2、下载CentOS 7的repo文件wget -O /etc/yum.
268563 0
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
8017 90
|
8月前
|
供应链 数据可视化 安全
如何用低代码平台自己开发一个进销存的系统?
本文介绍了如何利用低代码平台(如简道云)快速搭建企业进销存系统,解决传统ERP成本高、灵活性差的问题。内容涵盖适用场景、核心模块设计(商品信息、采购入库、销售出库)、库存看板与权限设置,并提供时间与成本参考,助力小团队高效实现个性化管理。
|
存储 移动开发 小程序
uniapp富文本editor输入二次扩展兼容微信小程序
uniapp富文本editor输入二次扩展兼容微信小程序
1005 0
|
JSON 小程序 前端开发
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
本文介绍了在微信小程序中使用`towxml`库将Markdown格式文本渲染为WXML的方法。文章提供了`towxml`的概述、安装步骤、以及如何在小程序中配置和使用`towxml`进行Markdown解析的详细说明和代码示例。
在Vue3项目中使用 vue3-seamless-scroll 无缝滚动插件
本文介绍了如何在Vue3项目中使用`vue3-seamless-scroll`插件实现无缝滚动效果,并提供了详细的示例代码和运行效果。
7831 0

热门文章

最新文章