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

packages/image/src/index.vue

@@ -19,16 +19,18 @@
       :class="{ 'el-image__inner--center': alignCenter, 'el-image__preview': preview }"
       @click="clickHandler"
     >
-    <template v-if="preview">
-      <image-viewer
-        v-if="showViewer"
-        :z-index="zIndex"
-        :initial-index="imageIndex"
-        :url-list="previewSrcList"
-        :hide-on-click-modal="hideOnClickModal"
-        @close="closeViewer"
-      />
-    </template>
+    <teleport to="body" :disabled="!appendToBody">
+      <template v-if="preview">
+        <image-viewer
+          v-if="showViewer"
+          :z-index="zIndex"
+          :initial-index="imageIndex"
+          :url-list="previewSrcList"
+          :hide-on-click-modal="hideOnClickModal"
+          @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,9 +173,10 @@ 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      |
 |---------- |-------- |---------- |
 | close | Emitted when clicking on `X` button or when `hide-on-click-modal` enabled clicking on backdrop | None |
-| switch | When switching images | `(val: number)` switching target index |
+| switch | When switching images | `(val: number)` switching target index |

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 |
@@ -180,4 +181,4 @@ Además de las características nativas de img, soporte de carga perezosa, marca
 | Event name      | Description    | Callback parameter      |
 |---------- |-------- |---------- |
 | close | Emitted when clicking on `X` button or when `hide-on-click-modal` enabled clicking on backdrop | None |
-| switch | When switching images | `(val: number)` switching target index |
+| switch | When switching images | `(val: number)` switching target index |

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 |
@@ -179,4 +180,4 @@ En plus des propriétés natives de img, ce composant supporte le lazy loading,
 | Event name      | Description    | Callback parameter      |
 |---------- |-------- |---------- |
 | close | Emitted when clicking on `X` button or when `hide-on-click-modal` enabled clicking on backdrop | None |
-| switch | When switching images | `(val: number)` switching target index |
+| switch | When switching images | `(val: number)` switching target index |

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 |
@@ -178,4 +180,4 @@ imgのネイティブ機能の他に、遅延ロード、カスタムプレー
 | Event name      | Description    | Callback parameter      |
 |---------- |-------- |---------- |
 | close | Emitted when clicking on `X` button or when `hide-on-click-modal` enabled clicking on backdrop | None |
-| switch | When switching images | `(val: number)` switching target index |
+| switch | When switching images | `(val: number)` switching target index |

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
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
@@ -179,4 +179,4 @@
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
 | close | 当点击 X 按钮或者在 hide-on-click-modal 为 true 时点击遮罩层时触发 | 无 |
-| switch | 当图片切换时触发 | (val: number) 切换目标的下标 |
+| switch | 当图片切换时触发 | (val: number) 切换目标的下标 |