feat(ImageView) support get container

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
 

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
 

src/image-preview/index.js

@@ -22,6 +22,7 @@ const defaultConfig = {
   showIndicators: false,
   closeOnPopstate: false,
   closeIconPosition: 'top-right',
+  getContainer: 'body',
 };
 
 const initInstance = () => {

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);
+});

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;
     };