elementUI组件中使用el-image的预览属性preview-src-list时,预览图片会出现图片闪烁的问题。
大致的原因是:如果父元素有使用到 transform, perspective 或 filter 属性,且设置的值不为 none 时,fixed 元素就会相对于父元素来进行定位,而预览图片要相对于浏览器进行定位的原因导致。
解决:
- idea one:若样式可以进行更改,更改容器定位方式,不使用transform进行偏移,去掉父元素的transform。
- idea two:若样式不便于更改,只能考虑通过js去更改 el-image-viewer__wrapper 在dom中的位置。
如果项目使用的是vue2版本的,可以使用一下js方法进行改写,或者使用第三方插件,比如portal-vue,同时要改写el-image,插件具体使用自行查询。
this.$nextTick(() => {
const body = document.querySelector('body');
let imageViewer=document.getElementByClassName('.el-image-viewer__wrapper');
body.append(imageViewer);
imageViewer.remove();
})
若你使用的是vue3,vue3的新特性中有一项 Teleport 标签,它是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。
or 同时element基于vue3的plus版本中,新增了一项新属性append-to-body:image-viewer 是否插入至 body 元素上。 嵌套的父元素属性会发生修改时应该将此属性设置为 true。
<teleport to="#modal-wrapper">
<el-image style="width: 100px; height: 100px" :src="url" :fit="fit" :preview-src-list="srcList" />
</teleport>
<el-image
style="width: 100px; height: 100px"
:src="url"
:preview-src-list="srcList"
:initial-index="4"
fit="cover"
:append-to-body='true'
/>