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

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.lryc.cn/news/307344.html

相关文章:

  • Leetcoder Day26| 回溯part06:总结+三道hard题
  • 浅谈 Linux 网络编程 - 网络字节序
  • Nginx网络服务六-----IP透传、调度算法和负载均衡
  • 【Linux进程】进程状态---进程僵尸与孤儿
  • MySQL数据库基础知识总结(适合小白入门使用)一
  • 历史新知网:寄快递寄个电脑显示器要多少钱?
  • 在两台CentOS 7服务器上部署MinIO集群。
  • 【计算机网络】深度学习使用应用层的HTTP协议
  • Ubuntu18.04 系统上配置并运行SuperGluePretrainedNetwork(仅使用CPU)
  • 协议-http协议-基础概念01-发展历程-http组成-http是什么-相关的应用-相关的协议
  • UI学习-学习内容
  • Flink CDC 提取记录变更时间作为事件时间和 Hudi 表的 precombine.field 以及1970-01-01 取值问题
  • 【网络安全】网络安全意识教育实用指南
  • wordpress模板购买网站推荐
  • LeetCode 刷题 [C++] 第240题.搜索二维矩阵 II
  • HP笔记本电脑如何恢复出厂设置?这里提供几种方法
  • Elasticsearch:了解人工智能搜索算法
  • (HAL)STM32F103C6T8——软件模拟I2C驱动0.96寸OLED屏幕
  • 分享便携式血氧仪单片机方案
  • 【Java设计模式】四、适配器模式
  • RV32/64 特权架构 - 特权模式与指令
  • 多微服务合并为一个服务
  • Springboot企业级开发--开发入门01
  • bash和sh和./的区别
  • LeetCode 3:寻找最长不含重复字符的子串长度
  • 【自然语言处理四-从矩阵操作角度看 自注意self attention】
  • Unity脚本,串行端口的握手协议(流控制)
  • 2023 re:Invent 用 Amazon Q 打造你的知识库
  • ChatGPT 国内快速上手指南
  • Docker 常用操作命令备忘