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
相关推荐
甄心爱学习9 小时前
【项目实训(个人10)】
开发语言·前端·javascript
触底反弹9 小时前
dom操作这篇文章就够了
javascript·面试
ThinkPet9 小时前
记事-vue3项目整合Agora声网sdk实现RTC视频通话
vue.js·音视频·实时音视频
无糖可可果9 小时前
从"查字典"到"写 Prompt":奇妙学习之旅
javascript
云宝大王9 小时前
JavaScript 异步编程:从回调到探索 Promise的秘密
前端·javascript
daols889 小时前
vxe-table 进阶:同时使用 formatter 与 cell-render 实现格式化与样式定制
前端·javascript·vue.js·vxe-table
前端张三9 小时前
ant design vue table 使用虚拟滚动
前端·javascript·vue.js
Asize9 小时前
重生之我在 Vibe Coding 时代当程序员:第十一课,JS底层 :变量提升真相
前端·javascript
HYCS9 小时前
用pixi.js实现fabric.js(五):事件系统
前端·javascript·canvas
小宇AI9 小时前
用纯 Node.js 写了一个 JS 解释器 — kernel-js-lite
javascript