vue3里面使用el-image-vie出现图片预览导致页面卡顿停止加载问题
需求：我们在使用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出现图片预览导致页面卡顿停止加载问题
需求：我们在使用element-plus组件里面的图片预览时候，通过点击按钮来实现图片预览的效果。在开发过程中我们会遇到图片预览的时候出现卡顿出不来，导致当前的页面停止加载了。 具体思路如下： 我们需要添加:preview-teleported“t…...
Leetcoder Day26｜ 回溯part06：总结+三道hard题
332.重新安排行程 给定一个机票的字符串二维数组 [from, to]，子数组中的两个成员分别表示飞机出发和降落的机场地点，对该行程进行重新规划排序。所有这些机票都属于一个从 JFK（肯尼迪国际机场）出发的先生，所以该行程必…...
浅谈 Linux 网络编程 - 网络字节序
文章目录 前言核心知识关于 小端法关于 大端法网络字节序的转换 函数 前言 在进行 socket 网络编程时，会用到字节流的转换函数、例如 inet_pton、htons 等，那么为什么要用到这些函数呢，本篇主要就是对这部分进行介绍。 核心知识 重点需要记…...
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…...
【Linux进程】进程状态---进程僵尸与孤儿
📙 作者简介 ：RO-BERRY 📗 学习方向：致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 📒 日后方向 : 偏向于CPP开发以及大数据方向，欢迎各位关注，谢谢各位的支持 目录 1.进程排队2.进程状态…...
MySQL数据库基础知识总结（适合小白入门使用）一
文章目录 一 数据库数据表的创建等基本操作二 数据类型的测试三 完整性约束条件四 数据表结构的相关操作五 对表中数据的操作六 表达式与查询七 高级的查询功能 一 数据库数据表的创建等基本操作 #注释内容（与python很像） -- 也为注释内容 -- 创建一个数…...
历史新知网：寄快递寄个电脑显示器要多少钱？
以下文字信息由（新史知识网）编辑整理发布。 让我们赶紧来看看吧！ 问题1：快递寄电脑显示器要多少钱？ 此物有多重？ 顺丰寄就可以了，但是必须是原包装的，不然不好寄。 问题2࿱…...
在两台CentOS 7服务器上部署MinIO集群。
环境说明： 2台Centos7服务器 IP地址分别为172.16.1.9和172.16.1.10 1. 创建minio用户和目录 在两台服务器上执行以下命令： sudo useradd -m -d /app/minio minio sudo mkdir -p /app/minioData sudo mkdir -p /app/minio/logs sudo chown -R mini…...
【计算机网络】深度学习使用应用层的HTTP协议
💓 博客主页：从零开始的-CodeNinja之路 ⏩ 收录文章：【计算机网络】深度学习使用应用层的HTTP协议 🎉欢迎大家点赞👍评论📝收藏⭐文章 文章目录 一:HTTP是什么二:HTTP请求1.HTTP请求的组成2.HTTP请求的方法…...
Ubuntu18.04 系统上配置并运行SuperGluePretrainedNetwork（仅使用CPU）
SuperGlue是Magic Leap在CVPR 2020上展示的研究项目，它是一个图神经网络（Graph Neural Network）和最优匹配层（Optimal Matching layer）的结合，训练用于对两组稀疏图像特征进行匹配。这个项目提供了PyTorch代…...
协议-http协议-基础概念01-发展历程-http组成-http是什么-相关的应用-相关的协议
发展历程-http组成-http是什么-相关的应用-相关的协议 参考来源： 极客时间-透视HTTP协议(作者：罗剑锋)； 01-HTTP的发展历程 1989 年，任职于欧洲核子研究中心（CERN）的蒂姆伯纳斯 - 李（Tim Ber…...
UI学习-学习内容
教程网址1：UI 新手如何从设计规范中提升自己 推荐一下高质量的设计规范 满屏干货 语雀 B站地址1：新像素 UI 新手如何从设计规范中提升自己 推荐一下高质量的设计规范 满屏干货 UI设计培训_哔哩哔哩_bilibili 教程地址2：UI 新手成长经验分享…...
Flink CDC 提取记录变更时间作为事件时间和 Hudi 表的 precombine.field 以及1970-01-01 取值问题
博主历时三年精心创作的《大数据平台架构与原型实现：数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行，点击《重磅推荐：建大数据平台太难了！给我发个工程原型吧！》了解图书详情，…...
【网络安全】网络安全意识教育实用指南
随着科技的不断发展和数字世界的变革，我们不仅从中获得前所未有的力量，也同时面临着前所未有的风险挑战。多数CISO（首席信息安全官）时刻致力于协助企业抵御各种安全威胁。在“武器库”中有一件珍贵的法宝：网络安全意识…...
wordpress模板购买网站推荐
简站wordpress主题 老牌wordpress开发团队，开发过数百款wordpress主题，作品是最好的简历，靠作品说话，看作品喜欢不喜欢就可以了。 https://www.jianzhanpress.com WP模板牛 免费wordpress下载网站，上面有上百款免费…...
LeetCode 刷题 [C++] 第240题.搜索二维矩阵 II
题目描述 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性： 每行的元素从左到右升序排列。 每列的元素从上到下升序排列。 题目分析 通过分析矩阵的特点发现，其左下角和右上角可以看作一个“二叉搜索树的根节…...
HP笔记本电脑如何恢复出厂设置？这里提供几种方法
要恢复出厂设置Windows 11或10的HP笔记本电脑，你可以使用操作系统的标准方法。如果你运行的是早期版本，你可以使用HP提供的单独程序清除计算机并重新安装操作系统。 恢复出厂设置运行Windows 11的HP笔记本电脑 所有Windows 11计算机都有一个名为“重置此电脑”的功能，可…...
Elasticsearch：了解人工智能搜索算法
作者：来自 Elastic Jessica Taylor, Aditya Tripathi 人工智能工具无处不在，其原因并不神秘。 他们可以执行各种各样的任务并找到许多日常问题的解决方案。 但这些应用程序的好坏取决于它们的人工智能搜索算法。 简单来说，人工智能搜索算法是…...
（HAL）STM32F103C6T8——软件模拟I2C驱动0.96寸OLED屏幕
一、电路接法 电路接法参照江科大视频。 二、相关代码及文件 说明：代码采用hal库，通过修改江科大代码实现。仅OLED.c文件关于引脚定义作了hal库修改，并将宏定义OLED_W_SCL(x)、OLED_W_SDA(x)作了相关修改。 1、OLED.c void OLED_I2C_Init(voi…...
分享便携式血氧仪单片机方案
血氧仪主要测量指标分别为脉率、血氧饱和度、灌注指数。血氧饱和度是临床医疗上重要的基础数据之一。以家用指压式血氧仪为例，一个血氧仪一般由MCU、存储芯片、两个控制LED的数模转换器、两个发光二极管驱动等组成。 灵动微电子的MM32MCU产品已被广泛地应用在了一些…...
C++：std::is_convertible
C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施，由雇主和个人按一定比例缴纳保险费，建立社会医疗保险基金，支付雇员医疗费用的一种医疗保险制度， 它是促进社会文明和进步的…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？
Otsu 是一种自动阈值化方法，用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理，能够自动确定一个阈值，将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）
笔记整理：刘治强，浙江大学硕士生，研究方向为知识图谱表示学习，大语言模型 论文链接：http://arxiv.org/abs/2407.16127 发表会议：ISWC 2024 1. 动机 传统的知识图谱补全（KGC）模型通过…...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
多模态大语言模型arxiv论文略读（108）
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题：CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者：Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral（热门工具 Ruff 的开发者）推出的下一代高性能 Python 包管理器和构建工具，用 Rust 编写。它旨在解决传统工具（如 pip、virtualenv、pip-tools）的性能瓶颈，同时…...
：观察者模式)
JS设计模式(4)：观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中，我们经常会遇到这样的场景：一个对象的状态变化需要自动通知其他对象，比如： 电商平台中，商品库存变化时需要通知所有订阅该商品的用户；新闻网站中࿰…...