当前位置： 首页 > news >正文

vue3里面使用el-image-vie出现图片预览导致页面卡顿停止加载问题

news 2025/9/14 11:31:21

需求：我们在使用element-plus组件里面的图片预览时候，通过点击按钮来实现图片预览的效果。在开发过程中我们会遇到图片预览的时候出现卡顿出不来，导致当前的页面停止加载了。

具体思路如下：

我们需要添加:preview-teleported=“true” 和 z-index=“9999” 两个属性进行控制。
（1）preview-teleported设置为true主要是用来把image-viewer 是否插入至 body 元素上。 嵌套的父元素属性会发生修改时应该将此属性设置为 true。

（2）z-index=“9999” 是当图片预览过程中，点开图片给他最大的权重可以让他能够预览看到效果。
（3）v-if=“state.imgViewerVisible” 这里主要是用来当点击对应按钮进行预览的操作，设置true就是图片可以预览出来

代码如下

<el-image-viewerstyle="width: 100px; height: 100px"v-if="state.imgViewerVisible":preview-teleported="true":z-index="9999"@close="closeImgViewer":url-list="state.srcList"></el-image-viewer>

相关文章：

vue3里面使用el-image-vie出现图片预览导致页面卡顿停止加载问题

需求&#xff1a;我们在使用element-plus组件里面的图片预览时候&#xff0c;通过点击按钮来实现图片预览的效果。在开发过程中我们会遇到图片预览的时候出现卡顿出不来&#xff0c;导致当前的页面停止加载了。 具体思路如下&#xff1a; 我们需要添加:preview-teleported“t…...

编程日记 2024/2/28 12:51:27

Leetcoder Day26｜ 回溯part06：总结+三道hard题

332.重新安排行程 给定一个机票的字符串二维数组 [from, to]&#xff0c;子数组中的两个成员分别表示飞机出发和降落的机场地点&#xff0c;对该行程进行重新规划排序。所有这些机票都属于一个从 JFK&#xff08;肯尼迪国际机场&#xff09;出发的先生&#xff0c;所以该行程必…...

编程日记 2024/2/28 12:50:26

浅谈 Linux 网络编程 - 网络字节序

文章目录 前言核心知识关于 小端法关于 大端法网络字节序的转换 函数 前言 在进行 socket 网络编程时&#xff0c;会用到字节流的转换函数、例如 inet_pton、htons 等&#xff0c;那么为什么要用到这些函数呢&#xff0c;本篇主要就是对这部分进行介绍。 核心知识 重点需要记…...

编程日记 2024/2/28 12:49:25

Nginx网络服务六-----IP透传、调度算法和负载均衡

1.实现反向代理客户端 IP 透传 就是在日志里面加上一个变量 Module ngx_http_proxy_module [rootcentos8 ~]# cat /apps/nginx/conf/conf.d/pc.conf server { listen 80; server_name www.kgc.org; location / { index index.html index.php; root /data/nginx/html/p…...

编程日记 2024/2/28 12:41:17

【Linux进程】进程状态---进程僵尸与孤儿

&#x1f4d9; 作者简介 &#xff1a;RO-BERRY &#x1f4d7; 学习方向&#xff1a;致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f4d2; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;欢迎各位关注&#xff0c;谢谢各位的支持 目录 1.进程排队2.进程状态…...

编程日记 2024/2/28 12:40:16

MySQL数据库基础知识总结（适合小白入门使用）一

文章目录 一 数据库数据表的创建等基本操作二 数据类型的测试三 完整性约束条件四 数据表结构的相关操作五 对表中数据的操作六 表达式与查询七 高级的查询功能 一 数据库数据表的创建等基本操作 #注释内容&#xff08;与python很像&#xff09; -- 也为注释内容 -- 创建一个数…...

编程日记 2024/2/28 12:34:08

历史新知网：寄快递寄个电脑显示器要多少钱？

以下文字信息由&#xff08;新史知识网&#xff09;编辑整理发布。 让我们赶紧来看看吧&#xff01; 问题1&#xff1a;快递寄电脑显示器要多少钱&#xff1f; 此物有多重&#xff1f; 顺丰寄就可以了&#xff0c;但是必须是原包装的&#xff0c;不然不好寄。 问题2&#xff1…...

编程日记 2024/2/28 12:31:05

在两台CentOS 7服务器上部署MinIO集群。

环境说明&#xff1a; 2台Centos7服务器 IP地址分别为172.16.1.9和172.16.1.10 1. 创建minio用户和目录 在两台服务器上执行以下命令&#xff1a; sudo useradd -m -d /app/minio minio sudo mkdir -p /app/minioData sudo mkdir -p /app/minio/logs sudo chown -R mini…...

编程日记 2024/2/28 12:29:04

【计算机网络】深度学习使用应用层的HTTP协议

&#x1f493; 博客主页&#xff1a;从零开始的-CodeNinja之路 ⏩ 收录文章&#xff1a;【计算机网络】深度学习使用应用层的HTTP协议 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 文章目录 一:HTTP是什么二:HTTP请求1.HTTP请求的组成2.HTTP请求的方法…...

编程日记 2024/2/28 12:15:53

Ubuntu18.04 系统上配置并运行SuperGluePretrainedNetwork（仅使用CPU）

SuperGlue是Magic Leap在CVPR 2020上展示的研究项目&#xff0c;它是一个图神经网络&#xff08;Graph Neural Network&#xff09;和最优匹配层&#xff08;Optimal Matching layer&#xff09;的结合&#xff0c;训练用于对两组稀疏图像特征进行匹配。这个项目提供了PyTorch代…...

编程日记 2024/2/28 12:13:52

协议-http协议-基础概念01-发展历程-http组成-http是什么-相关的应用-相关的协议

发展历程-http组成-http是什么-相关的应用-相关的协议 参考来源&#xff1a; 极客时间-透视HTTP协议(作者&#xff1a;罗剑锋)&#xff1b; 01-HTTP的发展历程 1989 年&#xff0c;任职于欧洲核子研究中心&#xff08;CERN&#xff09;的蒂姆伯纳斯 - 李&#xff08;Tim Ber…...

编程日记 2024/2/28 12:09:47

UI学习-学习内容

教程网址1&#xff1a;UI 新手如何从设计规范中提升自己 推荐一下高质量的设计规范 满屏干货 语雀 B站地址1&#xff1a;新像素 UI 新手如何从设计规范中提升自己 推荐一下高质量的设计规范 满屏干货 UI设计培训_哔哩哔哩_bilibili 教程地址2&#xff1a;UI 新手成长经验分享…...

编程日记 2024/2/28 12:07:44

Flink CDC 提取记录变更时间作为事件时间和 Hudi 表的 precombine.field 以及1970-01-01 取值问题

博主历时三年精心创作的《大数据平台架构与原型实现&#xff1a;数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行&#xff0c;点击《重磅推荐&#xff1a;建大数据平台太难了&#xff01;给我发个工程原型吧&#xff01;》了解图书详情&#xff0c;…...

编程日记 2024/2/28 12:05:42

【网络安全】网络安全意识教育实用指南

随着科技的不断发展和数字世界的变革&#xff0c;我们不仅从中获得前所未有的力量&#xff0c;也同时面临着前所未有的风险挑战。多数CISO&#xff08;首席信息安全官&#xff09;时刻致力于协助企业抵御各种安全威胁。在“武器库”中有一件珍贵的法宝&#xff1a;网络安全意识…...

编程日记 2024/2/28 12:03:40

wordpress模板购买网站推荐

简站wordpress主题 老牌wordpress开发团队&#xff0c;开发过数百款wordpress主题&#xff0c;作品是最好的简历&#xff0c;靠作品说话&#xff0c;看作品喜欢不喜欢就可以了。 https://www.jianzhanpress.com WP模板牛 免费wordpress下载网站&#xff0c;上面有上百款免费…...

编程日记 2024/2/28 12:00:37

LeetCode 刷题 [C++] 第240题.搜索二维矩阵 II

题目描述 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。 每列的元素从上到下升序排列。 题目分析 通过分析矩阵的特点发现&#xff0c;其左下角和右上角可以看作一个“二叉搜索树的根节…...

编程日记 2024/2/28 11:58:34

HP笔记本电脑如何恢复出厂设置？这里提供几种方法

要恢复出厂设置Windows 11或10的HP笔记本电脑，你可以使用操作系统的标准方法。如果你运行的是早期版本，你可以使用HP提供的单独程序清除计算机并重新安装操作系统。 恢复出厂设置运行Windows 11的HP笔记本电脑​ 所有Windows 11计算机都有一个名为“重置此电脑”的功能，可…...

编程日记 2024/2/28 11:57:33

Elasticsearch：了解人工智能搜索算法

作者&#xff1a;来自 Elastic Jessica Taylor, Aditya Tripathi 人工智能工具无处不在&#xff0c;其原因并不神秘。 他们可以执行各种各样的任务并找到许多日常问题的解决方案。 但这些应用程序的好坏取决于它们的人工智能搜索算法。 简单来说&#xff0c;人工智能搜索算法是…...

编程日记 2024/2/28 11:53:29

（HAL）STM32F103C6T8——软件模拟I2C驱动0.96寸OLED屏幕

一、电路接法 电路接法参照江科大视频。 二、相关代码及文件 说明&#xff1a;代码采用hal库&#xff0c;通过修改江科大代码实现。仅OLED.c文件关于引脚定义作了hal库修改&#xff0c;并将宏定义OLED_W_SCL(x)、OLED_W_SDA(x)作了相关修改。 1、OLED.c void OLED_I2C_Init(voi…...

编程日记 2024/2/28 11:52:28

分享便携式血氧仪单片机方案

血氧仪主要测量指标分别为脉率、血氧饱和度、灌注指数。血氧饱和度是临床医疗上重要的基础数据之一。以家用指压式血氧仪为例&#xff0c;一个血氧仪一般由MCU、存储芯片、两个控制LED的数模转换器、两个发光二极管驱动等组成。 灵动微电子的MM32MCU产品已被广泛地应用在了一些…...

编程日记 2024/2/28 11:51:27

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

编程新知 2025/8/25 23:31:20

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2025/9/14 1:53:04

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

编程新知 2025/7/5 11:03:11

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程新知 2025/9/13 17:38:50

安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

编程新知 2025/9/6 23:12:54

深度学习水论文：mamba＋图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

编程新知 2025/9/6 12:25:16

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

编程新知 2025/7/9 20:53:30

Elastic 获得 AWS 教育 ISV 合作伙伴资质，进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...

编程新知 2025/9/3 21:29:46

Python的__call__ 方法

在 Python 中&#xff0c;__call__ 是一个特殊的魔术方法&#xff08;magic method&#xff09;&#xff0c;它允许一个类的实例像函数一样被调用。当你在一个对象后面加上 () 并执行时&#xff08;例如 obj()&#xff09;&#xff0c;Python 会自动调用该对象的 __call__ 方法…...

编程新知 2025/7/7 23:07:44

Easy Excel

Easy Excel 一、依赖引入二、基本使用1. 定义实体类&#xff08;导入/导出共用&#xff09;2. 写 Excel3. 读 Excel 三、常用注解说明&#xff08;完整列表&#xff09;四、进阶&#xff1a;自定义转换器&#xff08;Converter&#xff09; 其它自定义转换器没生效 Easy Excel在…...

编程新知 2025/9/7 23:15:17