vue3.0 + element Plus实现预览大图的功能及图片遮罩层显示问题解决

html代码,在需要预览大图的地方引入<el-image>

preview-teleported：image-viewer 是否插入至 body 元素上。 嵌套的父元素属性会发生修改时应该将此属性设置为 true，设置这个属性图片遮罩层显示就不会有问题了。

preview-src-list：为预览大图的图片列表；

src：为图片地址

<div class="intro-img">
    <ul class="intro-img-list">
       <li class="app-intro-bd"
           v-for="i in appData?.GetAlgConfigMarket?.extraData?.previewImg"
          :key="i"
       >  
          <el-image style="width: 300px" :src="i" 
             :preview-src-list="appData?.GetAlgConfigMarket?.extraData?.previewImg"
             :preview-teleported="true"
           />
        </li>
   </ul>
</div>

预览效果展示：