解决el-image只能点击关闭按钮才能关闭的问题

问题:el-image打开大图预览时,只能点击关闭按钮才能关闭,点击蒙层不能关闭的

在这里插入图片描述
在这里插入图片描述

methods: {handleClickStop() {this.$nextTick(() => {const domImageView = document.querySelector(".el-image-viewer__mask") // 获取遮罩层domif (!domImageView) {return}domImageView.addEventListener('click', () => {// 点击遮罩层时调用关闭按钮的 click 事件document.querySelector('.el-image-viewer__close').click()})})}}

修改按钮样式

/deep/ {.el-image {.el-image-viewer__actions__inner {i {font-size: 23px;}}.el-image-viewer__close {.el-icon-circle-close {font-size: 40px;color: #ffffff;}}}
}

完美解决

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

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

相关文章

DOM【事件、操作节点、DOM案例】--学习JavaEE的day49

day49 JS核心技术 DOM 继day48 事件 键盘事件 监听器&#xff1a;onkeydown、onkeypress、onkeyup <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title></head><body><input type"text&q…

前端请求超时截断,axios timeout设置未生效情况记录

问题描述 前端请求超时截断&#xff0c;axios timeout设置未生效情况记录 timeout设置方式&#xff1a; 表现&#xff08;前端超过5min报错500&#xff0c;直接访问接口超过5min能够正常响应&#xff09;&#xff1a; 问题原因 上面的配置设置时间为1000min&#xff0c;明显…

前端开发攻略---三种方法解决Vue3图片动态引入问题

目录 1、将图片放入public文件夹中 2、使用 /src/.... 路径开头 3、生成图片的完整URL地址&#xff08;推荐&#xff09; 1、将图片放入public文件夹中 使用图片&#xff1a;路径为 /public 开头 <template><div><img :src"/public/${flag ? 01 : 02}.jp…

【电子学会】2023年09月图形化一级 -- 芝麻开门

芝麻开门 1. 准备工作 &#xff08;1&#xff09;删除小猫角色&#xff0c;添加角色Key&#xff1b; &#xff08;2&#xff09;删除白色背景&#xff0c;添加背景Castle 1和Pathway。 2. 功能实现 &#xff08;1&#xff09;点击绿旗&#xff0c;钥匙在舞台中间&#xff…

SQL——SELECT相关的题目

目录 197、上升的温度 577、员工奖金 586、订单最多的客户 596、超过5名学生的课 610、判断三角形 620、有趣的电影 181、超过经理收入的员工 1179、重新格式化部门表 1280、学生参加各科测试的次数 1068、产品销售分析I 1075、项目员工I 1084、销售分析III 1327、列出指…

2024最新 Jenkins + Docker 实战教程(六)- Jenkins配置邮箱接收构建通知

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…

【数据结构】二叉树的功能实现

文章目录 关于二叉树的创建如何创建二叉树实现二叉树的前、中、后序遍历层序遍历 关于二叉树的创建 在笔者的上一篇文章中堆进行了一个详细介绍&#xff0c;而二叉树是以堆为基础进行创建&#xff0c;它与堆的显著不同是 堆像是一个线性结构&#xff0c;堆的结构往往是一个数…

PHP生成二维码+二维码包含logo图片展示

composer require chillerlan/php-qrcode 用到的扩展自己安装&#xff08;注&#xff1a;只生成二维码只要开gd扩展就行&#xff09; 仅生成二维码看这个&#xff1a; use chillerlan\QRCode\QRCode;public function QRCode(){$qrcode new QRCode();$url "http://ww…

Beta 分布和 Gamma 分布

0. 摘要 本文主要介绍 B e t a Beta Beta 分布和 G a m m a Gamma Gamma 分布之间的关系, 以及两者的采样方法. 其实, PyTorch、Numpy、Scipy 等一些机器学习包已经实现了对这两种分布的包装, 本文主要目的是理解背后的大致原理. 1. Beta 分布 设 X ∼ B e t a ( α , β…

金蝶「起舞」,AI进化

能清晰感受到的是&#xff0c;金蝶仍然在不断进化&#xff0c;甚至伴随着AI时代的到来&#xff0c;它的进化信号愈发明显。 这些进化对应的具体动作是&#xff0c;把过去多年的服务模型整合成AI模型&#xff0c;把具体的服务“工艺”整理成流程编排能力&#xff0c;以及从740…

水下哨兵 智能守护——北斗人员落水报警与快速应急响应方案

随着科技的不断发展&#xff0c;人们对于安全的需求也越来越高&#xff0c;尤其是在水域活动中&#xff0c;落水事故时有发生&#xff0c;给人们的生命和财产安全带来了很大威胁。为了更好地保障水域活动者的安全&#xff0c;北斗短报文技术被广泛应用于落水报警系统中&#xf…

不平衡数据研究:分配权重 合并2个loader

分配权重&#xff08;基于实例分配&#xff0c;基于类分配&#xff09; import numpy as np import torch from torch.utils.data import DataLoader, WeightedRandomSampler, Dataset# Mock dataset class class MockDataset(Dataset):def __init__(self, data, targets):sel…

玩转OpenHarmony智能家居:如何实现开发版“碰一碰”设备控制

一、简介 “碰一碰”设备控制&#xff0c;依托NFC短距通信协议&#xff0c;通过碰一碰的交互方式&#xff0c;将OpenAtom OpenHarmony&#xff08;简称“OpenHarmony”&#xff09;标准系统设备和全场景设备连接起来&#xff0c;解决了应用与设备之间接续慢、传输难的问题&…

什么是DDoS流量清洗?

随着互联网的飞速发展&#xff0c;网络安全问题日益凸显&#xff0c;其中分布式拒绝服务&#xff08;DDoS&#xff09;攻击尤为引人关注。为了有效应对这一威胁&#xff0c;流量清洗服务应运而生&#xff0c;成为网络安全领域的一项重要技术。 流量清洗服务是一种专门针对DDoS…

昔日辉煌不再,PHP老矣,尚能饭否?

导语 | 近期 TIOBE 最新指数显示&#xff0c;PHP 的流行度降至了历史最低&#xff0c;排在第 17 名&#xff0c;同时&#xff0c;在年度 Stack Overflow 开发者调查报告中&#xff0c;PHP 在开发者中的受欢迎程度已经从之前的约 30% 萎缩至现在的 18%。“PHP 是世界上最好的语言…

WiFi蓝牙模块开发配置过程中需要注意的细节

在很多产品的应用场景中&#xff0c;WIFI网络会给我们提供很多便捷&#xff0c;MCU开发中大多使用串口WIFI蓝牙模块来实现产品接入WIFI网络中。   具体的使用模型如下图所示&#xff1a;整个系统涉及到WIFI网络、手机、服务器平台以及我们设计的产品&#xff0c;一个完整的生…

Docker技术搭建Grafana监控平台

centos7虚拟机和docker的安装&#xff1a;可以参考之前的博文 CPU、mysql-exporter、docker监控模板&#xff1a;百度网盘 提取码&#xff1a;0000 先查看服务器时间是否和当前时间一致&#xff0c;如果不一致&#xff0c;查看对应设置&#xff1a;centos7时间同步博文 一、…

拆分盘投资深度解析:投资逻辑、风险探讨与投资建议

随着互联网技术的飞速发展&#xff0c;金融领域也迎来了诸多创新。其中&#xff0c;拆分盘作为一种新型投资模式&#xff0c;以其独特的“只涨不跌”机制&#xff0c;吸引了众多投资者的目光。本文将深入探讨拆分盘的投资逻辑&#xff0c;并通过一个实际案例进行解析&#xff0…

BUUCTF [GUET-CTF2019]zips 1

BUUCTF:https://buuoj.cn/challenges 题目描述&#xff1a; 得到的 flag 请包上 flag{} 提交。 密文&#xff1a; 得到一个attachment.zip文件 解题思路&#xff1a; 1、解压attachment.zip&#xff0c;得到222.zip文件。尝试解压需要密码&#xff0c;使用Ziperello爆破密码…