From a87c8c3fe559bfa1694f9dd5c984e72bda2fe71e Mon Sep 17 00:00:00 2001 From: hearsay Date: Mon, 26 Apr 2021 11:54:22 +0800 Subject: [PATCH] fix(image): fix image Add the dom of the preview picture to the body (#1577) --- packages/image/src/index.vue | 26 ++++++++++++++++---------- website/docs/en-US/image.md | 3 ++- website/docs/es/image.md | 3 ++- website/docs/fr-FR/image.md | 3 ++- website/docs/jp/image.md | 4 +++- website/docs/zh-CN/image.md | 4 ++-- 6 files changed, 27 insertions(+), 16 deletions(-) diff --git a/packages/image/src/index.vue b/packages/image/src/index.vue index 263a44c78254a..1774fe6feeeb1 100644 --- a/packages/image/src/index.vue +++ b/packages/image/src/index.vue @@ -19,16 +19,18 @@ :class="{ 'el-image__inner--center': alignCenter, 'el-image__preview': preview }" @click="clickHandler" > - + + + @@ -64,6 +66,10 @@ export default defineComponent({ }, inheritAttrs: false, props: { + appendToBody: { + type: Boolean, + default: false, + }, hideOnClickModal: { type: Boolean, default: false, diff --git a/website/docs/en-US/image.md b/website/docs/en-US/image.md index 4490a311c5990..f66a20c7f8291 100644 --- a/website/docs/en-US/image.md +++ b/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 | \ No newline at end of file +| switch | When switching images | `(val: number)` switching target index | diff --git a/website/docs/es/image.md b/website/docs/es/image.md index 7f716b35198a3..5c50c1e93d91b 100644 --- a/website/docs/es/image.md +++ b/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 | \ No newline at end of file +| switch | When switching images | `(val: number)` switching target index | diff --git a/website/docs/fr-FR/image.md b/website/docs/fr-FR/image.md index a2039014241e6..ffea6dece5334 100644 --- a/website/docs/fr-FR/image.md +++ b/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 | \ No newline at end of file +| switch | When switching images | `(val: number)` switching target index | diff --git a/website/docs/jp/image.md b/website/docs/jp/image.md index e25885daa18b2..0a2ba64756d93 100644 --- a/website/docs/jp/image.md +++ b/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 | \ No newline at end of file +| switch | When switching images | `(val: number)` switching target index | diff --git a/website/docs/zh-CN/image.md b/website/docs/zh-CN/image.md index 869511e3ebe55..f86c433214187 100644 --- a/website/docs/zh-CN/image.md +++ b/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) 切换目标的下标 | \ No newline at end of file +| switch | 当图片切换时触发 | (val: number) 切换目标的下标 |