el-image组件预览图片同时操作页面

背景：el-image组件打开预览效果不能滑动页面。

Q:那么如何才能在打开遮罩层后还能操作页面呢？

 A:改变遮罩层的大小。CSS3有一个属性width：fit-content；可以解决这个问题。

打开F12看看饿了么的原生样式如下

加上width：fit-content；效果如下

红色区域就是可操作dom。并且可以随着拖动图片位置来设定遮罩层的大小。

最后注意一点。修改饿了么原生样式在vue2种需要加/deep/ 前缀修饰，不然不会生效。

 

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

R可视化：ggplot2绘制双y轴图

R可视化：ggplot2绘制双y轴图

介绍 ggplot2绘制双y轴图加载R包 knitr::opts_chunk$set(message = FALSE, warning = FALSE) library(tidyverse) library(readxl)# rm(list = ls()) options(stringsAsFactors = F) options(future.globals.maxSize = 10000 * 1024^2)Importing data 下载Underdetection of c…
阅读更多...
网页自动跳转到其他页面，点击浏览器返回箭头，回不到原来页面的问题

网页自动跳转到其他页面，点击浏览器返回箭头，回不到原来页面的问题

背景&#xff1a;今天产品提个需求&#xff0c;需要从index页面自动触发跳转到下一页面的事件&#xff0c;从而不做任何操作&#xff0c;直接跳转到test页面。 代码是这样的&#xff1a; index.vue: <template><div style"width:500px;height:600px;background-…
阅读更多...
(三)Servlet教程——Tomcat安装与启动

(三)Servlet教程——Tomcat安装与启动

首先打开浏览器在浏览器地址栏中输入清华大学开源软件镜像站地址&#xff0c;地址如下 https://mirrors.tuna.tsinghua.edu.cn/ 输入地址后回车会出现如下图所示的界面 在该界面找tomcat不是很好找&#xff0c;在搜索框中输入apache然后回车&#xff0c;输入apache后并回车后出…
阅读更多...
WebSocket的原理、作用、API、常见注解和生命周期的简单介绍，附带SpringBoot示例

WebSocket的原理、作用、API、常见注解和生命周期的简单介绍，附带SpringBoot示例

文章目录 原理作用客户端 API服务端 API生命周期常见注解SpringBoot示例 WebSocket是一种 通信协议 &#xff0c;它在 客户端和服务器之间建立了一个双向通信的网络连接 。WebSocket是一种基于TCP连接上进行 全双工通信 的 协议 。 WebSocket允许客户端和服务器在 单个TCP连接上…
阅读更多...
AI道路交通违章智能抓拍系统解决方案

AI道路交通违章智能抓拍系统解决方案

项目概述 背景 目前&#xff0c;XX市市全市民用汽车保有量94.62万辆&#xff0c;比上年末增长15.9%&#xff0c;其中私人汽车保有量35.48万辆&#xff0c;减少0.01%。轿车保有量39.45万辆&#xff0c;增长82.1%&#xff0c;其中私人轿车38.65万辆&#xff0c;增长82.1%。电动自…
阅读更多...
【项目实战】基于高并发服务器的搜索引擎

【项目实战】基于高并发服务器的搜索引擎

【项目实战】基于高并发服务器的搜索引擎 目录 【项目实战】基于高并发服务器的搜索引擎搜索引擎部分代码index.htmlindex.hpplog.hppparser.cc&#xff08;用于对网页的html文件切分且存储索引关系&#xff09;searcher.hpputil.hpphttp_server.cc&#xff08;用于启动服务器和…
阅读更多...
免费https证书申请

免费https证书申请

HTTPS证书&#xff0c;也称为SSL证书&#xff08;Secure Sockets Layer&#xff09;或TLS证书&#xff08;Transport Layer Security&#xff09;&#xff0c;是一种数字证书&#xff0c;用于在互联网通信中确保数据传输的安全性、完整性和真实性。它是基于公钥基础设施&#x…
阅读更多...
VirtualFlow亮相核反应堆技术全国重点实验室2024学术年会

VirtualFlow亮相核反应堆技术全国重点实验室2024学术年会

为加强先进核能技术领域科技创新与应用&#xff0c;核反应堆技术全国重点实验室及先进核能技术全国重点实验室2024年学术年会在四川成都启幕&#xff0c;9名院士和近百家科研院所、高校和企业等近700名专家学者齐聚一堂&#xff0c;聚焦和探讨核反应堆及先进核能重大基础理论和…
阅读更多...
RAG开山之作：结合参数化与非参数化记忆的知识密集型NLP任务新解法

RAG开山之作：结合参数化与非参数化记忆的知识密集型NLP任务新解法

20年RAG刚提出时的论文&#xff1a;Retrieval-Augmented Generation for Knowledge-Intensive NLP Tasks&#xff0c;也算是RAG的开山之作之一了。 摘要&#xff1a;检索增强生成&#xff08;RAG&#xff09;方法结合了预训练语言模型与基于检索的非参数化记忆&#xff0c;通过…
阅读更多...
正整数的性质：和与根

正整数的性质：和与根

目录 数字和 数字和介绍 数字和简单应用 哈沙德数 最小元素各数位之和 数字根 数字根介绍 数字根简单应用 数字和 数字和介绍 简单来说&#xff0c;数字和即一个整数数字每一位数值相加求和所得的值&#xff0c;数字和可以为任意正整数&#xff0c;使用代码获取一个数值的数字和…
阅读更多...
Git笔记-配置ssh

Git笔记-配置ssh

Git在Deepin中的ssh配置 一、环境二、安装1. 查看GitHub账户2. 配置 git3. 生成 ssh key 三、配置 一、环境 系统&#xff1a; Deepin v23 Git仓库&#xff1a;GitHub 二、安装 1. 查看GitHub账户 在设置界面看到自己的邮箱&#xff0c;这个邮箱就是后面会用到的邮箱 2. …
阅读更多...
在Java中使用XxlCrawler时防止被反爬的几种方式

在Java中使用XxlCrawler时防止被反爬的几种方式

目录 前言 一、常见的反爬措施 1、User-Agent识别 2、Referer识别 3、频率限制 4、IP限制 二、XxlCrawer的应对之道 1、User-Agent应对 2、频率限制 3、IP限制 三、XxlCrawler执行解析 1、XxlCrawler对象 2、启动对象 3、信息爬取线程 总结 前言 众所周知&#x…
阅读更多...
LAMMPS单层石墨烯建模

LAMMPS单层石墨烯建模

本文主要介绍两种晶胞建模方式。 一、Z形晶胞 晶胞分析&#xff1a;a1沿水平x轴方向&#xff0c;a2沿垂直y轴方向。石墨烯是二维结构&#xff0c;a3取小于单层石墨烯厚度。假设石墨烯键长L1.421&#xff0c;则a13L&#xff0c;a21.732L&#xff0c;a32L&#xff08;低于3.35即…
阅读更多...
IDEA离线安装插件

IDEA离线安装插件

1、下载地址 https://plugins.jetbrains.com/idea 如果去其他编辑器&#xff0c;点击下拉&#xff0c;选择即可。 2.搜索 在输入框输入关键词&#xff0c;按照提示选择即可&#xff0c;点击搜索按钮&#xff0c;查看结果。 3、选择版本 按照自己的版本选择合适的版本 4、安…
阅读更多...
探索比特币符文热：市场趋势与持续性分析

探索比特币符文热：市场趋势与持续性分析

在加密货币世界中&#xff0c;比特币一直是备受关注的焦点之一。然而&#xff0c;近年来&#xff0c;随着DeFi&#xff08;去中心化金融&#xff09;的兴起&#xff0c;一种新的潮流开始崭露头角——比特币符文。本文将探讨比特币符文的兴起&#xff0c;分析市场趋势&#xff0…
阅读更多...
FTP与SMB深度对比：文件传输协议谁更胜一筹？

FTP与SMB深度对比：文件传输协议谁更胜一筹？

在数字化时代&#xff0c;文件传输已成为日常工作中不可或缺的一部分。 FTP&#xff08;文件传输协议&#xff09;和SMB&#xff08;服务器消息块&#xff09;是两种最为常见的文件传输协议。它们各自在文件传输领域拥有独特的优势和特点&#xff0c;但同时也存在一些差异。 今…
阅读更多...
【学习】软件测试自动化，是未来的趋势还是当前的必需

【学习】软件测试自动化，是未来的趋势还是当前的必需

在当今快速迭代的软件开发周期中&#xff0c;速度和质量成为了企业生存的关键。随着DevOps实践的普及和持续集成/持续部署&#xff08;CI/CD&#xff09;流程的标准化&#xff0c;软件测试自动化已经从未来的趋势转变为当前的必要性。本文将探讨自动化测试的现状、必要性以及其…
阅读更多...
C基础语法速览

C基础语法速览

叠甲&#xff1a;以下文章主要是依靠我的实际编码学习中总结出来的经验之谈&#xff0c;求逻辑自洽&#xff0c;不能百分百保证正确&#xff0c;有错误、未定义、不合适的内容请尽情指出&#xff01; 文章目录 1.数据类型1.1.数据类型的常见分类1.2.数据类型的符号修饰1.3.数据…
阅读更多...
W801学习笔记十一：掌机进阶V3版本之硬件改造

W801学习笔记十一：掌机进阶V3版本之硬件改造

经由前面的笔记&#xff0c;我们打造出了一款游戏掌机。 W801学习笔记十&#xff1a;HLK-W801制作学习机/NES游戏机(总结) 然而&#xff0c;考虑到后续的游戏开发&#xff0c;总是忧心容量不足。故而&#xff0c;在正式展开软件开发工作以前&#xff0c;最终进行一下升级改造…
阅读更多...
百面算法工程师 | 激活函数 Activate Function

百面算法工程师 | 激活函数 Activate Function

目录 10.1激活函数作用&#xff1a; 10.2 为什么激活函数都是非线性的 10.3 常见激活函数的优缺点及其取值范围 10.4 激活函数问题的汇总 10.4.1 Sigmoid的缺点&#xff0c;以及如何解决 10.4.2 ReLU在零点可导吗&#xff0c;如何进行反向传播 10.4.3 Softmax溢出怎么处…
阅读更多...
最新文章

Copyright @ 2022~2023