fix(image): fix image Add the dom of the preview picture to the body (#1577)

packages/image/src/index.vue

@@ -19,6 +19,7 @@
       :class="{ 'el-image__inner--center': alignCenter, 'el-image__preview': preview }"
       @click="clickHandler"
     >
+    <teleport to="body" :disabled="!appendToBody">
       <template v-if="preview">
         <image-viewer
           v-if="showViewer"
@@ -29,6 +30,7 @@
           @close="closeViewer"
         />
       </template>
+    </teleport>
   </div>
 </template>
 
@@ -64,6 +66,10 @@ export default defineComponent({
   },
   inheritAttrs: false,
   props: {
+    appendToBody: {
+      type: Boolean,
+      default: false,
+    },
     hideOnClickModal: {
       type: Boolean,
       default: false,

website/docs/en-US/image.md

@@ -173,6 +173,7 @@ Besides the native features of img, support lazy load, custom placeholder and lo
 | initial-index | The initial preview image index, less than or equal to the length of `url-list` | number | int | 0 |
 | infinite | Whether preview is infinite | boolean | true / false | true |
 | hide-on-click-modal | Whether user can emit close event when clicking backdrop | boolean | true / false | false |
+| append-to-body     | whether to append image itself to body. A nested parent element attribute transform should have this attribute set to `true` | boolean   | — | false |
 
 ### ImageViewer Events
 | Event name      | Description    | Callback parameter      |

website/docs/es/image.md

@@ -154,6 +154,7 @@ Además de las características nativas de img, soporte de carga perezosa, marca
 | src | origen de la imagen, igual que en nativo | string | — | - |
 | scroll-container | El contenedor para añadir el scroll listener cuando se utiliza lazy load | string / HTMLElement | — | El contenedor padre más cercano cuya propiedad de desbordamiento es auto o scroll |
 | z-index | establecer el z-index de la vista previa de la imagen | Number | — | 2000 |
+| append-to-body     | whether to append image itself to body. A nested parent element attribute transform should have this attribute set to `true` | boolean   | — | false |
 
 ### Image Eventos
 | Nombre del evento | Descripción | Parámetros |

website/docs/fr-FR/image.md

@@ -153,6 +153,7 @@ En plus des propriétés natives de img, ce composant supporte le lazy loading,
 | src | Source de l'image, identique au natif. | string | — | - |
 | scroll-container | Le conteneur auquel ajouter le listener du scroll en mode lazy loading. | string / HTMLElement | — | Le conteneur parent le plus proche avec la propriété overflow à auto ou scroll. |
 | z-index | set image preview z-index | Number | — | 2000 |
+| append-to-body     | whether to append image itself to body. A nested parent element attribute transform should have this attribute set to `true` | boolean   | — | false |
 
 ### Image Évènements
 | Nom | Description | Paramètres |

website/docs/jp/image.md

@@ -152,6 +152,8 @@ imgのネイティブ機能の他に、遅延ロード、カスタムプレー
 | src | image source、ネイティブと同じ | string | — | - |
 | scroll-container | 遅延ロード時にスクロールリスナーを追加するコンテナ | string / HTMLElement | — | The nearest parent container whose overflow property is auto or scroll |
 | z-index | セットイメージプレビュー z-index | Number | — | 2000 |
+| append-to-body     | whether to append image itself to body. A nested parent element attribute transform should have this attribute set to `true` | boolean   | — | false |
+
 
 ### Image イベント
 | Event Name | Description | Parameters |

website/docs/zh-CN/image.md

@@ -152,7 +152,7 @@
 | src | 图片源，同原生 | string | — | - |
 | scroll-container | 开启懒加载后，监听 scroll 事件的容器 | string / HTMLElement | — | 最近一个 overflow 值为 auto 或 scroll 的父元素 |
 | z-index | 设置图片预览的 z-index | Number | — | 2000 |
-
+| append-to-body     | image 自身是否插入至 body 元素上。嵌套的父元素设置了 transform 属性必须指定该属性并赋值为 true   | boolean   | — | false |
 ### Image Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |