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

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

news 2026/4/21 5:57:46

需求：我们在使用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

Phi-3.5-mini-instruct系统提示词设计：专家/教师/程序员角色设定

Phi-3.5-mini-instruct系统提示词设计&#xff1a;专家/教师/程序员角色设定 1. 模型概述 Phi-3.5-mini-instruct是微软推出的轻量级指令微调大语言模型&#xff0c;采用Transformer解码器架构&#xff0c;支持128K超长上下文窗口。该模型针对多语言对话、代码生成和逻辑推理…...

编程新知 2026/4/21 5:51:56

用PYNQ-Z2开发板，从零实现一个HDMI彩条信号发生器（Vivado 2023.1工程分享）

用PYNQ-Z2开发板从零构建HDMI彩条发生器&#xff1a;Vivado 2023.1全流程实战 当你第一次拿到PYNQ-Z2这块集成了FPGA与ARM处理器的开发板时&#xff0c;最令人兴奋的莫过于通过硬件编程实现视觉输出。本文将带你完成一个经典入门项目——HDMI彩条信号发生器&#xff0c;这个项目…...

编程新知 2026/4/21 4:45:27

RAG检索增强生成：让大模型拥有最新知识

什么是RAG RAG&#xff08;Retrieval-Augmented Generation&#xff09; 即检索增强生成技术&#xff0c;是一种将信息检索系统与大规模语言模型相结合的技术框架。其核心思想是在生成回答之前&#xff0c;先从外部知识库中检索相关信息&#xff0c;然后将这些信息作为上下文提…...

编程新知 2026/4/21 3:06:11

Co-MOF-74@Fe₃O₄ NPs，Co-MOF-74修饰四氧化三铁纳米颗粒，反应机制

Co-MOF-74Fe₃O₄ NPs&#xff0c;Co-MOF-74修饰四氧化三铁纳米颗粒&#xff0c;反应机制Co-MOF-74Fe₃O₄ NPs&#xff08;Co-MOF-74修饰四氧化三铁纳米颗粒&#xff09;是一类由磁性无机核与过渡金属有机骨架协同构建的核–壳型复合纳米材料&#xff0c;其反应机制可从“表面…...

编程新知 2026/4/21 2:39:21

【2026年版｜收藏级】AI大模型学习保姆级规划，小白程序员零门槛入门指南

2026年AI大模型技术持续爆发&#xff0c;越来越多的小白和程序员想入局学习&#xff0c;却普遍陷入“不知道从何下手、分不清重点、踩坑走弯路”的困境——要么盲目啃晦涩的论文&#xff0c;要么只会调用API却不懂底层逻辑&#xff0c;最后半途而废。 别急&#xff01;针对2026…...

编程新知 2026/4/21 1:52:31

API密钥泄露率飙升47%？Dify 2026网关安全配置（2024Q3 CISA认证级实操手册）

第一章&#xff1a;API密钥泄露率飙升47%的行业现状与Dify 2026网关安全演进逻辑近年来&#xff0c;API密钥泄露事件呈爆发式增长。根据2025年CNVD与OWASP联合发布的《AI服务接口安全年报》&#xff0c;全球生产环境中检测到的硬编码API密钥泄露数量同比上升47%&#xff0c;其中…...

编程新知 2026/4/21 0:05:48

终极指南：如何用YaeAchievement在3分钟内完成原神成就数据导出

终极指南&#xff1a;如何用YaeAchievement在3分钟内完成原神成就数据导出 【免费下载链接】YaeAchievement 更快、更准的原神数据导出工具 项目地址: https://gitcode.com/gh_mirrors/ya/YaeAchievement 还在为整理《原神》数百项成就而手动记录吗&#xff1f;YaeAchie…...

编程新知 2026/4/20 22:53:39

如何优化深分页场景下的回表代价_延迟关联与主键游标分页

OFFSET 越大查询越慢&#xff0c;因MySQL需扫描并丢弃前NM行&#xff0c;深分页时即使走索引也要回表读取百万级主键再判断条件&#xff0c;本质是“假走索引、真全扫”。为什么 OFFSET 越大&#xff0c;查询越慢&#xff1f;MySQL 的 OFFSET 不是跳过前 N 行再取数据&#xff…...

编程新知 2026/4/20 22:42:38

用Python生成正弦扫频信号：从20Hz到20kHz，手把手教你测试音频设备频率响应

用Python生成正弦扫频信号&#xff1a;从20Hz到20kHz的音频设备测试指南 在音频工程领域&#xff0c;频率响应测试是评估设备性能的基础环节。无论是调试新设计的扬声器、验证耳机音质&#xff0c;还是校准录音棚的监听系统&#xff0c;准确测量设备在不同频段的输出特性都至关…...

编程新知 2026/4/20 22:24:13

用PaddlePaddle动态图复现ResNet50，从零搭建一个眼底病变分类器（附完整代码）

基于PaddlePaddle动态图的ResNet50眼底病变分类实战指南 在医疗影像分析领域&#xff0c;自动化的疾病筛查系统正逐渐成为临床医生的得力助手。眼底病变的早期发现对预防视力损伤至关重要&#xff0c;而深度学习技术为这一任务提供了新的可能性。本文将带领读者使用PaddlePadd…...

编程新知 2026/4/20 21:49:06