From 39b5beeac0d4a7e74866cb92eb9e4644872cf41a Mon Sep 17 00:00:00 2001
From: sylvaner_bc <745620190@qq.com>
Date: Thu, 18 Jun 2020 14:51:54 +0800
Subject: [PATCH] feat(ImageView) support get container

---
 src/image-preview/README.md          |  2 ++
 src/image-preview/README.zh-CN.md    |  2 ++
 src/image-preview/index.js           |  1 +
 src/image-preview/test/index.spec.js | 44 ++++++++++++++++++++++++++++
 types/image-preview.d.ts             |  1 +
 5 files changed, 50 insertions(+)

diff --git a/src/image-preview/README.md b/src/image-preview/README.md
index 93dc31c3b..f9679ef7d 100644
--- a/src/image-preview/README.md
+++ b/src/image-preview/README.md
@@ -117,6 +117,7 @@ export default {
 | closeable `v2.5.0` | Whether to show close icon | _boolean_ | `false` |
 | closeIcon `v2.5.0` | Close icon name | _string_ | `clear` |
 | closeIconPosition `v2.5.0` | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
+| getContainer | Return the mount node for ImagePreview | _string \| () => Element_ | - |
 
 ### Props
 
@@ -136,6 +137,7 @@ export default {
 | closeable `v2.5.0` | Whether to show close icon | _boolean_ | `false` |
 | close-icon `v2.5.0` | Close icon name | _string_ | `clear` |
 | close-icon-position `v2.5.0` | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
+| get-container | Return the mount node for ImagePreview | _string \| () => Element_ | - |
 
 ### Events
 
diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md
index c981dca01..9a1777eb0 100644
--- a/src/image-preview/README.zh-CN.md
+++ b/src/image-preview/README.zh-CN.md
@@ -151,6 +151,7 @@ export default {
 | closeable `v2.5.0` | 是否显示关闭图标 | _boolean_ | `false` |
 | closeIcon `v2.5.0` | 关闭图标名称或图片链接 | _string_ | `clear` |
 | closeIconPosition `v2.5.0` | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
+| getContainer | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
 
 ### Props
 
@@ -172,6 +173,7 @@ export default {
 | closeable `v2.5.0` | 是否显示关闭图标 | _boolean_ | `false` |
 | close-icon `v2.5.0` | 关闭图标名称或图片链接 | _string_ | `clear` |
 | close-icon-position `v2.5.0` | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
+| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
 
 ### Events
 
diff --git a/src/image-preview/index.js b/src/image-preview/index.js
index 83fe8edd8..fed894b97 100644
--- a/src/image-preview/index.js
+++ b/src/image-preview/index.js
@@ -22,6 +22,7 @@ const defaultConfig = {
   showIndicators: false,
   closeOnPopstate: false,
   closeIconPosition: 'top-right',
+  getContainer: 'body',
 };
 
 const initInstance = () => {
diff --git a/src/image-preview/test/index.spec.js b/src/image-preview/test/index.spec.js
index b74102fa6..c99b22bfd 100644
--- a/src/image-preview/test/index.spec.js
+++ b/src/image-preview/test/index.spec.js
@@ -265,3 +265,47 @@ test('closeOnPopstate', () => {
 test('ImagePreview.Component', () => {
   expect(ImagePreview.Component).toEqual(ImagePreviewVue);
 });
+
+test('get container with function call ', async (done) => {
+  const element = document.createElement('div');
+  document.body.appendChild(element);
+  ImagePreview({ images, getContainer: () => element });
+
+  await Vue.nextTick();
+  const wrapperDiv = document.querySelector('.van-image-preview');
+  expect(wrapperDiv.parentNode).toEqual(element);
+  document.body.removeChild(element);
+
+  ImagePreview(images);
+
+  await Vue.nextTick();
+  const wrapperBody = document.querySelector('.van-image-preview');
+  expect(wrapperBody.parentNode).toEqual(document.body);
+
+  done();
+});
+
+test('get container with component call', () => {
+  const div1 = document.createElement('div');
+  const div2 = document.createElement('div');
+  const wrapper = mount({
+    template: `
+    <div>
+      <van-image-preview :value="true" :get-container="getContainer">
+      </van-image-preview>
+    </div>
+    `,
+    data() {
+      return {
+        getContainer: () => div1,
+      };
+    },
+  });
+  const imageView = wrapper.find('.van-image-preview').element;
+
+  expect(imageView.parentNode).toEqual(div1);
+  wrapper.vm.getContainer = () => div2;
+  expect(imageView.parentNode).toEqual(div2);
+  wrapper.vm.getContainer = null;
+  expect(wrapper.element).toEqual(wrapper.element);
+});
diff --git a/types/image-preview.d.ts b/types/image-preview.d.ts
index 0e7ff210e..03acd4658 100644
--- a/types/image-preview.d.ts
+++ b/types/image-preview.d.ts
@@ -18,6 +18,7 @@ export type ImagePreviewOptions =
       showIndicators?: boolean;
       closeOnPopstate?: boolean;
       closeIconPosition?: string;
+      getContainer?: string | (() => Element);
       onClose?: () => void;
       onChange?: (index: number) => void;
     };