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>

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

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

相关文章

可观测性在威胁检测和取证日志分析中的作用

在网络中&#xff0c;威胁是指可能影响其平稳运行的恶意元素&#xff0c;因此&#xff0c;对于任何希望避免任何财政损失或生产力下降机会的组织来说&#xff0c;威胁检测都是必要的。为了先发制人地抵御来自不同来源的任何此类攻击&#xff0c;需要有效的威胁检测情报。 威胁…

《WebGIS快速开发教程》第6版正式发布啦!

大家过完了一个开心快乐团圆的春节之后&#xff0c;现在也开始慢慢进入到工作和学习的节奏中去了&#xff0c;最近的这段时间是大家考研结果公布和换工作的高峰期&#xff0c;很多成绩不太理想的学生和即将打算换工作的同学都可能会想学习webgis相关&#xff0c;因此我们团队赶…

python学习笔记-关键字

Python中的关键字是一组被编程语言保留用于特定目的的单词。这些关键字具有特殊含义&#xff0c;不能被用作变量名或标识符。下面是python中的关键字&#xff1a; False await else import pass None break except in raise True …

Bicycles(变形dijkstra,动态规划思想)

Codeforces Round 918 (Div. 4) G. Bicycles G. Bicycles 题意&#xff1a; 斯拉夫的所有朋友都打算骑自行车从他们住的地方去参加一个聚会。除了斯拉维奇&#xff0c;他们都有一辆自行车。他们可以经过 n n n 个城市。他们都住在城市 1 1 1 &#xff0c;想去参加位于城市…

Day 59 | 动态规划 583. 两个字符串的删除操作、 72. 编辑距离、编辑距离总结篇

583. 两个字符串的删除操作 题目 文章讲解 视频讲解 class Solution {public int minDistance(String word1, String word2) {int len1 word1.length();int len2 word2.length();int[][] dp new int[len1 1][len2 1];for (int i 1; i < len1; i) {for (int j 1; j …

华纳云:oracle数据库启动与关闭的方法

在Oracle数据库中&#xff0c;您可以使用 SQL*Plus 工具或者 SQL Developer 来启动和关闭数据库实例。以下是在 Oracle 数据库中启动和关闭数据库实例的一般步骤&#xff1a; 启动 Oracle 数据库实例&#xff1a; 使用 SQL*Plus 启动数据库&#xff1a; 打开终端或命令提示符窗…

c++学习:字符串string类

C语言中对字符串的表示通常用指针&#xff0c;新手会面临内存泄漏或者段错误等众多问题。 在 C 中&#xff0c; string 类是标准库的一部分&#xff0c;用于表示和操作字符串。它是对传统的 C 风格字符串&#xff08;以空 字符 \0 结尾的字符数组&#xff09;的一个更安全、更…

防御第六次作业

DPI DPI --- 深度包检测技术 --- 主要针对完整的数据包&#xff08;数据包分片&#xff0c;分段需要重组&#xff09;&#xff0c;之后对数据包的内容进行识别。&#xff08;应用层&#xff09; 1&#xff0c;基于“特征字”的检测技术 --- 最常用的识别手段&#xff0c;基于…

dolphinscheduler海豚调度(三)SQL任务

在之前的博文中&#xff0c;我们已经介绍了DolphinScheduler海豚调度的基本概念和模块&#xff0c;安装部署和元数据切换&#xff0c;以及Shell任务的实践。今天&#xff0c;让我们来深入探讨DolphinScheduler中另一种常见的任务类型&#xff1a;SQL任务。 SQL任务是DolphinSc…

10:00面试,10:05就出来了,问的问题过于变态了。。。

我从一家小公司转投到另一家公司&#xff0c;期待着新的工作环境和机会。然而&#xff0c;新公司的加班文化让我有些始料未及。虽然薪资相对较高&#xff0c;但长时间的工作和缺乏休息使我身心俱疲。 就在我逐渐适应这种高强度的工作节奏时&#xff0c;公司突然宣布了一则令人…

如何做代币分析:以 TRX 币为例

作者&#xff1a;lesleyfootprint.network 编译&#xff1a;cicifootprint.network 数据源&#xff1a;TRX 代币仪表板 &#xff08;仅包括以太坊数据&#xff09; 在加密货币和数字资产领域&#xff0c;代币分析起着至关重要的作用。代币分析指的是深入研究与代币相关的数据…

[python] `sys.settrace` 跟踪函数

sys.settrace 是 Python 中的一个调试工具&#xff0c;它允许你设置一个跟踪函数&#xff0c;在程序执行过程中对每个函数调用进行跟踪。当设置了跟踪函数后&#xff0c;Python 解释器在每次函数调用、返回或异常抛出时都会调用该跟踪函数&#xff0c;从而使你能够观察和记录程…

ffmpeg深度学习滤镜

环境搭建 安装显卡驱动 当前所用显卡为NVIDIA的P6000,在英伟达的官网上查看对应的驱动, 下载NVIDIA-Linux-x86_64-535.104.05.run并安装。 sudo ./NVIDIA-Linux-x86_64-535.104.05.run 安装成功后用nvidia-smi命令后查看 安装的cuda版本不能超过12.2,选择安装cuda11.8。…

Netty01NIO

NIO基础 NIO &#xff1a;non-blocking io 非阻塞 IO 笔记 www.zgtsky.top 网课&#xff1a;黑马Netty 三大组件 Channel & Buffer channel 有一点类似于 stream&#xff0c;它就是读写数据的双向通道&#xff0c;可以从 channel 将数据读入 buffer&#xff0c;也可以…

资料分析:常见关系

两数比关系 一、基础概念 1.产销率(工业产品销售率)是指工业企业在一定时期已经销售的产品总量与可供销售的工业产品总量之比。产品销售率是指报告期产品销售量与产品生产量的比率。是反映报告期工业企业产品产销衔接情况&#xff0c;反映产品生产、销售、流通及满足社会需要程…

Linux学习笔记11——用户组添加删除

Linux 是多用户多任务操作系统&#xff0c;换句话说&#xff0c;Linux 系统支持多个用户在同一时间内登陆&#xff0c;不同用户可以执行不同的任务&#xff0c;并且互不影响。 例如&#xff0c;某台 Linux 服务器上有 4 个用户&#xff0c;分别是 root、www、ftp 和 mysql&…

nginx实现http反向代理及负载均衡

目录 一、代理概述 1、代理概念 1.1 正向代理&#xff08;Forward Proxy&#xff09; 1.2 反向代理&#xff08;Reverse Proxy&#xff09; 1.3 正向代理与反向代理的区别 2、同构代理与异构代理 2.1 同构代理 2.2 异构代理 2.3 同构代理与异构代理的区别 二、四层代…

Linux离线安装Ansible

Linux离线安装Ansible 可自行去下载相关包,也可以给我评论留言,我发给大家 python -Vtar -zxvf setuptools-7.0.tar.gz cd setuptools-7.0/ python setup.py installtar -zxvf pycrypto-2.6.1.tar.gz cd pycrypto-2.6.1/ python setup.py install报错时 src/MD2.c:31:20: 致…

使用.NET 升级助手工具将.net framework4.8 MVC项目升级到net6

1 新建.net framework4.8 MVC项目 随便添加一个可以访问的界面用于测试 2 对当前项目进行升级 注意&#xff1a;若要进行升级&#xff0c;首先确保本地已安装相应的sdk&#xff0c;例如&#xff1a;dotnet-sdk-6.0.402-win-x64.exe1.运行cmd命令窗口&#xff0c;进入项目所在…

Ethernet/IP转CC-Link IEFB协议网关

产品功能 1 YC-EIP-CCLKIE工业级EtherNet/IP 网关 2 CC-Link IEFB转 EtherNet/IP 3支持多个CC-Link IEFB节点 4 即插即用 无需编程 轻松组态 ,即实现数据交互 5导轨安装 支持提供EDS文件 6 EtherNET/IP与CC-Link IEFB互转数据透明传输可接入PLC组态 支持CodeSys/支持欧姆…