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
相关推荐
吃饭睡觉打豆豆嘛10 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
Spider_Man10 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
小高00710 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
EveryPossible10 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua10 小时前
setup函数相关【3】
前端·javascript·vue.js
neon120411 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画
Sammyyyyy11 小时前
Node.js 做 Web 后端优势为什么这么大?
开发语言·前端·javascript·后端·node.js·servbay
Bling_Bling_112 小时前
面试常考:js中 Map和 Object 的区别
开发语言·前端·javascript
前端小巷子12 小时前
JS实现丝滑文字滚动
前端·javascript·面试
写不出来就跑路12 小时前
基于 HTML+CSS+JavaScript 的薪资实时计算器(含本地存储和炫酷动画)
javascript·css·html