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 [email protected] -S
相关推荐
再学一点就睡1 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
難釋懷3 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
还是鼠鼠3 小时前
Node.js全局生效的中间件
javascript·vscode·中间件·node.js·json·express
自动花钱机3 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5
bst@微胖子4 小时前
Flutter项目之登录注册功能实现
开发语言·javascript·flutter
拉不动的猪4 小时前
简单回顾下pc端与mobile端的适配问题
前端·javascript·面试
qp4 小时前
21.OpenCV获取图像轮廓信息
javascript·opencv·webpack
烛阴5 小时前
深入浅出:JavaScript ArrayBuffer 的使用与应用
前端·javascript
@PHARAOH6 小时前
WHAT - Electron 系列(一)
前端·javascript·electron
loriloy6 小时前
Electron崩溃问题排查指南
javascript·electron