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

03-01 1207阅读

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

vue3里面使用el-image-vie出现图片预览导致页面卡顿停止加载问题
(图片来源网络,侵删)

具体思路如下:

我们需要添加:preview-teleported=“true” 和 z-index=“9999” 两个属性进行控制。

(1)preview-teleported设置为true主要是用来把image-viewer 是否插入至 body 元素上。 嵌套的父元素属性会发生修改时应该将此属性设置为 true。

(2)z-index=“9999” 是当图片预览过程中,点开图片给他最大的权重可以让他能够预览看到效果。

(3)v-if=“state.imgViewerVisible” 这里主要是用来当点击对应按钮进行预览的操作,设置true就是图片可以预览出来

代码如下

  
VPS购买请点击我

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

目录[+]