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
相关推荐
IT、木易4 分钟前
大白话React第八章React 深入进阶与实践拓展阶段
javascript·react.js·ecmascript
冲!!8 分钟前
vue3中ref和reactive响应式数据、ref模板引用(组合式和选项式区别)、组件ref的使用
前端·javascript·vue.js
一路向前的月光11 分钟前
React(11)路由demo
javascript·react.js·ecmascript
Swift社区36 分钟前
【Swift 算法实战】利用 KMP 算法高效求解最短回文串
vue.js·算法·leetcode
小王码农记39 分钟前
【天地图-点线面最全功能】天地图实现功能:回显、绘制、编辑、删除任意点线面
javascript
Neo Evolution1 小时前
每天一个Flutter开发小项目 (6) : 表单与验证的专业实践 - 构建预约应用
android·开发语言·前端·javascript·flutter
bigyoung1 小时前
JavaScript 中判断一个对象中是否存在相同的 `value`
javascript
小金子J2 小时前
Vue 表单优化:下拉框值改变前的确认提示与还原逻辑实现
前端·javascript·vue.js·elementui
AC-PEACE2 小时前
JSX基础 —— 识别JS表达式
开发语言·javascript·react.js
BillKu2 小时前
Element Plus中el-select选择器的下拉选项列表的样式设置
前端·javascript·vue.js