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

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 =
-            getContainer === 'body'
-              ? document.body
-              : document.querySelector(getContainer);
-        } else {
-          container = getContainer();
-        }
+        container =
+          typeof getContainer === 'string'
+            ? document.querySelector(getContainer)
+            : 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();
       }
     }