el-image大图预览显示在父组件，无法全屏显示的问题

       开发gis项目，通常会定制右侧容器组件，通过插槽插入子组件，各模块功能内容在右侧容器中展示。当通过el-image实现大图预览时，发现只能在容器组件中展示，查找原因，发现是：如果父元素的 transform, perspective 或 filter 属性不为 none 时，fixed 元素就会相对于父元素来进行定位 的原因导致。如下图：

 解决方案：

方法一：更改容器定位方式，不使用transform进行偏移。

方法二：若父容器不便于更改，只能考虑更改 el-image-viewer__wrapper 在dom中的位置。在全部dom渲染完毕后，获取大图预览的dom。如下图：

 若你使用的是vue2，只能通过以下方式，待验证。或者通过第三方插件portal-vue，同时要改写el-image。

<template>
<el-image
   ref="myImage"
   :src="pic"
   :preview-src-list="picArray"
>
</template>
<script>
export default{
//略
watch:{
 'this.$refs.myImage.showViewer'(newV){
  if(newV){
         this.$nextTick(() => {
		const body = document.querySelector('body');
        let imageViewer=document.getElementByClassName('.el-image-viewer__wrapper')
		body.append(imageViewer);
        imageViewer.remove();
	})
        }
     }
   }

}

</script>

 若你使用的是vue3，恭喜你，省去了很大麻烦。众所周知vue3的新特性中有一项 Teleport 标签，它可以将我们的模板移动到 DOM中的其他位置。element基于vue3的plus版本中，新增了一项新属性：

 查看源码：

 可以发现这里使用了Teleport 标签，将image-viewer子组件直接移动到了body下，保证了定位方式为fixed的元素，是以浏览器窗口进行定位的。

所以，我们只需要在<el-image>标签中增加append-to-body='true'属性即可解决该问题。