[new feature] Dialog: add getContainer option (#3040)

.eslintignore

@@ -1,4 +1,5 @@
 es
 lib
 dist
+types
 node_modules

packages/dialog/en-US.md

@@ -85,6 +85,8 @@ export default {
 | closeOnClickOverlay | Whether to close when click overlay | `Boolean` | `false` |
 | lockScroll | Whether to lock body scroll | `Boolean` | `true` |
 | beforeClose | Callback before close,<br>call done() to close dialog,<br>call done(false) to cancel loading | (action: string, done: function) => void | - |
+| getContainer | Return the mount node for Dialog | `String | () => HTMLElement` | `body` |
+
 
 #### Advanced Usage
 
@@ -146,7 +148,7 @@ export default {
 | close-on-click-overlay | Whether to close when click overlay | `Boolean` | `false` |
 | lock-scroll | Whether to lock background scroll | `Boolean` | `true` |
 | before-close | Callback before close,<br>call done() to close dialog,<br>call done(false) to cancel loading | (action: string, done: function) => void | - |
-| get-container | Return the mount node for Dialog | `String | () => HTMLElement` | - |
+| get-container | Return the mount node for Dialog | `String | () => HTMLElement` | `body` |
 
 ### Event
 

packages/dialog/index.js

@@ -16,8 +16,6 @@ const initInstance = () => {
   instance.$on('input', value => {
     instance.value = value;
   });
-
-  document.body.appendChild(instance.$el);
 };
 
 const Dialog = options => {
@@ -47,6 +45,7 @@ Dialog.defaultOptions = {
   lockScroll: true,
   beforeClose: null,
   messageAlign: '',
+  getContainer: 'body',
   confirmButtonText: '',
   cancelButtonText: '',
   showConfirmButton: true,

packages/dialog/zh-CN.md

@@ -86,6 +86,7 @@ export default {
 | closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - |
 | lockScroll | 是否锁定背景滚动 | `Boolean` | `true` | - |
 | beforeClose | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | `(action, done) => void` | - | 1.1.6 |
+| getContainer | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | `String | () => HTMLElement` | `body` | 1.6.11 |
 
 
 #### 高级用法
@@ -149,7 +150,7 @@ export default {
 | close-on-click-overlay | 是否在点击蒙层后关闭 | `Boolean` | `false` | - |
 | lock-scroll | 是否锁定背景滚动 | `Boolean` | `true` | - |
 | before-close | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | `(action, done) => void` | - | 1.1.6 |
-| get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | `String | () => HTMLElement` | - | 1.1.6 |
+| get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | `String | () => HTMLElement` | `body` | 1.1.6 |
 
 ### Event
 

packages/mixins/popup/index.js

@@ -143,14 +143,10 @@ export const PopupMixin = {
       const { getContainer } = this;
 
       if (getContainer) {
-        if (typeof getContainer === 'string') {
+        container =
-          container =
+          typeof getContainer === 'string'
-            getContainer === 'body'
+            ? document.querySelector(getContainer)
-              ? document.body
+            : getContainer();
-              : document.querySelector(getContainer);
-        } else {
-          container = getContainer();
-        }
       } else if (this.$parent) {
         container = this.$parent.$el;
       }

packages/toast/index.js

@@ -32,7 +32,6 @@ function createInstance() {
     const toast = new (Vue.extend(VueToast))({
       el: document.createElement('div')
     });
-    document.body.appendChild(toast.$el);
     queue.push(toast);
   }
   return queue[queue.length - 1];
@@ -60,7 +59,10 @@ function Toast(options = {}) {
       if (!singleton && !isServer) {
         clearTimeout(toast.timer);
         queue = queue.filter(item => item !== toast);
-        document.body.removeChild(toast.$el);
+
+        if (document.body.contains(toast.$el)) {
+          document.body.removeChild(toast.$el);
+        }
         toast.$destroy();
       }
     }

types/dialog.d.ts

@@ -13,8 +13,9 @@ export type DialogOptions = {
   showConfirmButton?: boolean;
   showCancelButton?: boolean;
   closeOnClickOverlay?: boolean;
+  getContainer?: string | (() => HTMLElement);
   beforeClose?: (action: DialogAction, done: DialogDone) => void;
-}
+};
 
 export interface Dialog {
   (options: DialogOptions): Promise<DialogAction>;
@@ -28,7 +29,7 @@ export interface Dialog {
 
 declare module 'vue/types/vue' {
   interface Vue {
-    $dialog: Dialog
+    $dialog: Dialog;
   }
 }
 

types/toast.d.ts

@@ -13,7 +13,8 @@ export type ToastOptions = {
   forbidClick?: boolean;
   loadingType?: string;
   message?: ToastMessage;
-}
+  getContainer?: string | (() => HTMLElement);
+};
 
 export interface VanToast extends Vue, VanPopupMixin {
   type: string;
@@ -24,7 +25,7 @@ export interface VanToast extends Vue, VanPopupMixin {
   clear(): void;
 }
 
-export interface IToast {
+export interface Toast {
   (message: ToastOptions | ToastMessage, options?: ToastOptions): VanToast;
   loading(options?: ToastOptions | ToastMessage): VanToast;
   success(options?: ToastOptions | ToastMessage): VanToast;
@@ -33,13 +34,13 @@ export interface IToast {
   install(): void;
   setDefaultOptions(options: ToastOptions): void;
   resetDefaultOptions(): void;
-  allowMultiple(allow: boolean): void
+  allowMultiple(allow: boolean): void;
 }
 
 declare module 'vue/types/vue' {
   interface Vue {
-    $toast: IToast
+    $toast: Toast;
   }
 }
 
-export const Toast: IToast;
+export const Toast: Toast;

types/waterfall.d.ts

@@ -2,7 +2,7 @@ import { DirectiveFunction, PluginFunction } from 'vue';
 
 export interface Waterfall {
   (type: string): DirectiveFunction;
-  install: PluginFunction<void>
+  install: PluginFunction<void>;
 }
 
 export const Waterfall: Waterfall;