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
相关推荐
CodeClimb2 小时前
【华为OD-E卷 - 第k个排列 100分(python、java、c++、js、c)】
java·javascript·c++·python·华为od
沈梦研2 小时前
【Vscode】Vscode不能执行vue脚本的原因及解决方法
ide·vue.js·vscode
轻口味2 小时前
Vue.js 组件之间的通信模式
vue.js
光头程序员4 小时前
grid 布局react组件可以循数据自定义渲染某个数据 ,或插入某些数据在某个索引下
javascript·react.js·ecmascript
fmdpenny5 小时前
Vue3初学之商品的增,删,改功能
开发语言·javascript·vue.js
小美的打工日记5 小时前
ES6+新特性,var、let 和 const 的区别
前端·javascript·es6
涔溪5 小时前
有哪些常见的 Vue 错误?
前端·javascript·vue.js
程序猿online5 小时前
前端jquery 实现文本框输入出现自动补全提示功能
前端·javascript·jquery
亦黑迷失7 小时前
vue 项目优化之函数式组件
前端·vue.js·性能优化
Turtle7 小时前
SPA路由的实现原理
前端·javascript