vue3.0 + element Plus实现预览大图的功能及图片遮罩层显示问题解决
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>
预览效果展示:
更多推荐
已为社区贡献8条内容
所有评论(0)