el-image预览图片点击遮盖处关闭预览

问题页面
预览关闭按钮不明显

解决方式:
1.修改按钮样式明显点:

//el-image 添加自定义类名,下文【test-image】代指
.test-image .el-icon-circle-close{ 
color:#fff;
font-size:20px;
...改成很明显的样式
}

2.使用事件监听,监听当前遮盖mask,点击时,执行关闭按钮的事件。

       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版本即可

npm i element-ui@2.15.1 -S

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/49907.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

web前端开发一、VScode环境搭建

1、VScode安装live server插件,写完代码后,保存就会在浏览器自动更新,不需要再去浏览器点击刷新了 2、创建html文件 3、在文件中输入感叹号 ! 4、选择第一个,然后回车,就会自动输入html的标准程序 5、…

我在百科荣创企业实践——简易函数信号发生器(6)

对于高职教师来说,必不可少的一个任务就是参加企业实践。这个暑假,本人也没闲着,报名参加了上海市电子信息类教师企业实践。7月8日到13日,有幸来到美丽的泉城济南,远离了上海的酷暑,走进了百科荣创科技发展有限公司。在这短短的一周时间里,我结合自己的教学经验和企业的…

Vue Router 4【实用教程】(2024最新版)vue3 路由管理

Vue Router 是 Vue 官方的客户端路由解决方案,在单页应用 (SPA) 中,用户在应用中浏览不同页面时,URL 会随之更新,但页面不需要从服务器重新加载。 核心思想: 通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些…

Xtrabackup备份mysql数据库

XtraBackup是一个用于MySQL和Percona Server的开源热备份工具,它由Percona开发。XtraBackup支持两种备份类型:完整备份(full backup)和增量备份(incremental backup)。 一、备份原理及优势 xtrabackup在备份…

OpenCV库学习之cv2.GaussianBlur函数

OpenCV库学习之cv2.GaussianBlur函数 一、简介 cv2.GaussianBlur 是 OpenCV 图像处理库中的一个函数,它用于对图像进行高斯模糊处理。高斯模糊是一种常用的图像模糊技术,通过高斯函数对图像进行卷积,实现图像的平滑效果,常用于去…

20240724-然后用idea创建一个Java项目/配置maven环境/本地仓储配置

1.创建一个java项目 (1)点击页面的create project,然后next (2)不勾选,继续next (3)选择新项目名称,新项目路径,然后Finsh,在新打开的页面选择…

IDEA在编译的时候报Error: java: 找不到符号符号: 变量 log lombok失效问题

错误描述 idea因为lombok的报错: java: You arent using a compiler supported by lombok, so lombok will not work and has been disabled.Your processor is: com.sun.proxy.$Proxy8Lombok supports: sun/apple javac 1.6, ECJ 原因:这是由于Lombok的版本过低的…

ARM-A7通用中断服务函数-1

中断流程 保存现场-执行中断服务函数-返回现场 .S文件的修改 先看代码: IRQ_Handler:push {lr} /* 保存lr地址 */push {r0-r3, r12} /* 保存r0-r3,r12寄存器 */mrs r0, spsr /* 读取spsr寄存器 */push {r0} /* 保存spsr寄存器 */mrc p1…

分布式:RocketMQ/Kafka总结(附下载链接)

文章目录 下载链接思维导图 本文总结的是关于消息队列的常见知识总结。消息队列和分布式系统息息相关,因此这里就将消息队列放到分布式中一并进行处理关联 下载链接 链接: https://pan.baidu.com/s/1hRTh7rSesikisgRUO2GBpA?pwdutgp 提取码: utgp 思维导图

刷题了:150. 逆波兰表达式求值 |239. 滑动窗口最大值 |347.前 K 个高频元素

150. 逆波兰表达式求值 题目链接:https://leetcode.cn/problems/evaluate-reverse-polish-notation/description/ 文章讲解:https://programmercarl.com/0150.%E9%80%86%E6%B3%A2%E5%85%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F%E6%B1%82%E5%80%BC.html 视频讲解:https://www.bilibili.…

crack 基于golang的多并发爆破工具

一款轻巧的内网弱口令枚举工具,项目地址:GitHub - oksbsb/crack: 支持 ftp ssh smb mysql mssql postgres 安装 ​ git clone https://github.com/yanweijin/crack go build main.go基于用法 ➜ crack git:(master) ✗ go run main.go --help …

UE4调试UE4Editor-Cmd.exe

在工作中,我们看到这样的构建命令: %EnginePath%\Binaries\Win64\UE4Editor-Cmd.exe %ClientPath%\%ProjectName%.uproject -runHotPatcher {其它参数} 我们应该如何调试UE4Editor-Cmd.exe呢?其实调试 UE4Editor.exe 就可以了(参考…

1111111111111111111111

https://chat18.aichatos.xyz/#/chat/1716220931748File "D:\微信\venv\Lib\site-packages\pyautogui\__init__.py", line 228, in _couldNotImportPyScreezeraise PyAutoGUIException( pyautogui.PyAutoGUIException: PyAutoGUI was unable to import pyscreeze. (T…

LabVIEW程序员以后会不会被ai取代?

关于LabVIEW程序员未来的就业前景和AI的影响,可以从多个角度进行分析: AI对LabVIEW程序员的影响 自动化和AI辅助编程: AI正在迅速发展,可以在某些领域自动生成代码、优化代码和检测错误。对于标准化的、重复性的编程任务&#xf…

解决:Maven模块项目引入其他模块项目依赖,却无法引用对方文件异常

解决:Maven模块项目引入其他模块项目依赖,却无法引用对方文件异常 一问题描述:Maven模块项目引入其他模块项目依赖,却无法引用对方文件二问题原因:三解决方案: 一问题描述:Maven模块项目引入其他…

【优秀python系统毕设】基于Python flask的气象数据可视化系统设计与实现,有LSTM算法预测气温

第一章 绪论 1.1 研究背景 在当今信息爆炸的时代,气象数据作为重要的环境信息资源,扮演着关键的角色。然而,传统的气象数据呈现方式存在信息量庞大、难以理解的问题,限制了用户对气象信息的深入理解和利用。因此,基…

React的img图片路径怎么写

在React中,图片路径的写法取决于你的图片资源是如何被管理和存放的。这里有几种常见的情况和对应的写法: 1. 图片作为React组件的静态资源 如果你的图片文件放在React项目的public文件夹下(这是Create React App项目的默认结构)…

List容器

此处是带头双向链表 对于List,不像string、vector之类的,没有reserve的说法,也不支持[ ]和下标,只有一种方式遍历List也就是采用迭代器(范围for的底层也是迭代器)。 insert函数和erase函数(需要配合std库里…

Java入门TCP客户端和服务器应用程序 2024.7.27 22:14

下面是一个完整的示例,展示如何使用 Java 的 Socket 和 ServerSocket 类编写一个简单的 TCP 客户端和服务器应用程序,以及一个简单的聊天应用程序。代码包括客户端和服务器的实现,能够通过 TCP 连接进行消息交换。 1. TCP 服务器程序 首先&…

文件包含漏洞及利用

一、文件包含功能 1、文件包含的作用:减小代码的荣誉 2、文件包含函数: include 、 require 3、文件包含的方式 静态文件包含------文件名是固定的------ a.php中存在普通的字符串,被b.php包含, a.php中的字符串会直接完成输出 a…