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
相关推荐
海鸥两三15 分钟前
uniapp 小程序引入 uview plus 框架,获得精美的UI框架
前端·vue.js·ui·小程序·uni-app
lightgis1 小时前
16openlayers加载COG(云优化Geotiff)
前端·javascript·html·html5
小飞大王6661 小时前
TypeScript核心类型系统完全指南
前端·javascript·typescript
合作小小程序员小小店4 小时前
web网页开发,在线考勤管理系统,基于Idea,html,css,vue,java,springboot,mysql
java·前端·vue.js·后端·intellij-idea·springboot
防火墙在线4 小时前
前后端通信加解密(Web Crypto API )
前端·vue.js·网络协议·node.js·express
她是太阳,好耀眼i5 小时前
Nvm 实现vue版本切换
javascript·vue.js·ecmascript
蒲公英10015 小时前
在wps软件的word中使用js宏命令设置表格背景色
javascript·word·wps
han_6 小时前
前端高频面试题之Vue(初、中级篇)
前端·vue.js·面试
一枚前端小能手6 小时前
📜 `<script>`脚本元素 - 从加载策略到安全性与性能的完整指南
前端·javascript
掘金安东尼6 小时前
TypeScript为何在AI时代登顶:Anders Hejlsberg 的十二年演化论
前端·javascript·面试