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
相关推荐
程序员初一1 小时前
我把跑了两年 WordPress 的机器重装了一遍,顺便把面板卸了
javascript
kyriewen2 小时前
别再用防抖做懒加载了:120 张图只加载出 4 张
前端·javascript·程序员
CodeMi3 小时前
2026 CSS 接管了这些 JS 的活:6 个 Baseline 特性的落地取舍
javascript·css
康小旺4 小时前
AI 写 Vue 总写成同一个味道:给它装 Skills,装的不是知识是边界
vue.js·typescript
全栈项目管理程序猿4 小时前
ArcGIS JS 基础教程(35):体元系列 - VoxelLayer 时间维度动画
前端·javascript
徐小夕5 小时前
JitKnow AI知识库 4.7 发布|多文档推理+拖拽 Agent + 技能库,打造更懂业务的 AI 知识中台
前端·vue.js·github
小poop6 小时前
从“雷峰塔”到“对象”:JavaScript基础语法入门指南
前端·javascript
chunyublog7 小时前
HDFS 上传文件名空格问题排障教程
前端·javascript·npm
FRing038 小时前
JavaScript入门到精通二十九(内置构造函数(Object、Array))
开发语言·前端·javascript
天才熊猫君8 小时前
前端队列,我是怎么从 `push + shift` 换成游标的
前端·javascript