el-image预览图片点击遮盖处关闭预览

预览关闭按钮不明显

解决方式:

1.修改按钮样式明显点:

css 复制代码
//el-image 添加自定义类名,下文【test-image】代指
.test-image .el-icon-circle-close{ 
color:#fff;
font-size:20px;
...改成很明显的样式
}

2.使用事件监听,监听当前遮盖mask,点击时,执行关闭按钮的事件。

javascript 复制代码
       document.addEventListener("click", function (e) {
			if (e.target.className == "el-image-viewer__mask") {
				let close = document.querySelector(".el-icon-circle-close");
				close.click();
			}
		});

最终解决方式:

由于当前需求是在表格页面点击多个图片,升级element-ui版本即可

javascript 复制代码
npm i element-ui@2.15.1 -S
相关推荐
threerocks7 小时前
AI 原生软件开发生命周期手册 - 如何借助 AI,逐阶段改造软件开发生命周期
前端·javascript·后端
ly76898 小时前
JavaScript 从入门到进阶:核心语法、异步编程与工程化实践
开发语言·javascript·ecmascript
剑胆琴心静水深流9 小时前
全栈之路6---web集成与呈现
前端·vue.js·spring boot·分布式·spring·前端框架·npm
沙盘客10 小时前
AFSIM 示例解读(03)· 六自由度飞行仿真 six_dof(下):机场运作与弹道导弹投送
java·javascript·经验分享
默_笙12 小时前
👍 我的代码被 ESLint 抓包了:单引号、var、没分号——全被当场点名
前端·javascript
oh,huoyuyan12 小时前
JS 动态网页抓不到?试试火车采集器网页抓取工具
开发语言·javascript·ecmascript
汉堡大王952713 小时前
用 Trae Work 自动化任务,6 分钟生成一份前端生态周报
前端·javascript·人工智能
章鱼小丸子逃跑中14 小时前
【2025最新版】如何将fnm与node.js安装在D盘?【保姆级安装及人性话理解教程】
前端·javascript·npm·node.js
CAD老兵15 小时前
在浏览器里对比 DWG/DXF 图纸 —— @mlightcad/cad-diff-viewer
前端·javascript·github
WL_arm16 小时前
Vibe Coding(氛围编程)入门
javascript·css·人工智能·html5