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
相关推荐
微祎_11 小时前
Flutter for OpenHarmony:构建一个 Flutter 单词拼图游戏,深入解析状态驱动 UI、交互式字母操作与教育类应用设计
javascript·flutter·ui
摘星编程11 小时前
用React Native开发OpenHarmony应用:ProgressBar缓冲进度显示
javascript·react native·react.js
人机与认知实验室11 小时前
<span class=“js_title_inner“>如何看待特斯拉第三代Optimus机器人?</span>
开发语言·javascript·机器人·ecmascript·unix
Doris89311 小时前
【 Vue】 Vue3全面讲解文档
前端·javascript·vue.js
换日线°11 小时前
vue 实现Element Plus的炫酷主题切换
javascript·vue.js
linweidong11 小时前
大厂工程化实践:如何构建可运维、高稳定性的 Flutter 混合体系
javascript·flutter
Hexene...11 小时前
【前端Vue】如何快速直观地查看引入的前端依赖?名称版本、仓库地址、开源协议、作者、依赖介绍、关系树...(Node Modules Inspector)
前端·javascript·vue.js
fanruitian12 小时前
div水平垂直居中
前端·javascript·html
旭久12 小时前
react+antd实现一个支持多种类型及可新增编辑搜索的下拉框
前端·javascript·react.js
摘星编程12 小时前
用React Native开发OpenHarmony应用:Loading加载状态组件
javascript·react native·react.js