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
相关推荐
mCell1 小时前
前端路由详解:Hash vs History
前端·javascript·vue-router
海上彼尚1 小时前
无需绑卡的海外地图
前端·javascript·vue.js·node.js
1024肥宅1 小时前
手写 call、apply、bind 的实现
前端·javascript·ecmascript 6
科杰智能制造2 小时前
纯前端html、js实现人脸检测和表情检测,可直接在浏览器使用
前端·javascript·html
每天吃饭的羊2 小时前
组件库的有些点击事件是name-click这是如何分装de
前端·javascript·vue.js
Coder-coco2 小时前
个人健康管理|基于springboot+vue+个人健康管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·mysql·论文
1024肥宅3 小时前
防抖(Debounce)
前端·javascript·ecmascript 6
1024肥宅3 小时前
节流(Throttle)
前端·javascript·ecmascript 6
大怪v3 小时前
【Virtual World 02】两点一线!!!
javascript·css·html
by__csdn3 小时前
Vue2纯前端图形验证码实现详解+源码
前端·javascript·typescript·vue·状态模式·css3·canva可画