diff --git a/.eslintignore b/.eslintignore index c05831264..bc3e29c5d 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,4 +1,5 @@ es lib dist +types node_modules diff --git a/packages/dialog/en-US.md b/packages/dialog/en-US.md index 8135734bf..50bcd3088 100644 --- a/packages/dialog/en-US.md +++ b/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,
call done() to close dialog,
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,
call done() to close dialog,
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 diff --git a/packages/dialog/index.js b/packages/dialog/index.js index 30305f3a5..623aa081f 100644 --- a/packages/dialog/index.js +++ b/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, diff --git a/packages/dialog/zh-CN.md b/packages/dialog/zh-CN.md index cc90fd2aa..798a8a564 100644 --- a/packages/dialog/zh-CN.md +++ b/packages/dialog/zh-CN.md @@ -86,6 +86,7 @@ export default { | closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - | | lockScroll | 是否锁定背景滚动 | `Boolean` | `true` | - | | beforeClose | 关闭前的回调函数，
调用 done() 后关闭弹窗，
调用 done(false) 阻止弹窗关闭 | `(action, done) => void` | - | 1.1.6 | +| getContainer | 指定挂载的节点，可以传入选择器，
或一个返回节点的函数 | `String | () => HTMLElement` | `body` | 1.6.11 | #### 高级用法 @@ -149,7 +150,7 @@ export default { | close-on-click-overlay | 是否在点击蒙层后关闭 | `Boolean` | `false` | - | | lock-scroll | 是否锁定背景滚动 | `Boolean` | `true` | - | | before-close | 关闭前的回调函数，
调用 done() 后关闭弹窗，
调用 done(false) 阻止弹窗关闭 | `(action, done) => void` | - | 1.1.6 | -| get-container | 指定挂载的节点，可以传入选择器，
或一个返回节点的函数 | `String | () => HTMLElement` | - | 1.1.6 | +| get-container | 指定挂载的节点，可以传入选择器，
或一个返回节点的函数 | `String | () => HTMLElement` | `body` | 1.1.6 | ### Event diff --git a/packages/mixins/popup/index.js b/packages/mixins/popup/index.js index 777900ea6..97a137f71 100644 --- a/packages/mixins/popup/index.js +++ b/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; } diff --git a/packages/toast/index.js b/packages/toast/index.js index 522c2d779..011fd21f2 100644 --- a/packages/toast/index.js +++ b/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(); } } diff --git a/types/dialog.d.ts b/types/dialog.d.ts index 41b593bc8..d4d0d8ec9 100644 --- a/types/dialog.d.ts +++ b/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; @@ -28,7 +29,7 @@ export interface Dialog { declare module 'vue/types/vue' { interface Vue { - $dialog: Dialog + $dialog: Dialog; } } diff --git a/types/toast.d.ts b/types/toast.d.ts index 2163e2ed2..e7f994a32 100644 --- a/types/toast.d.ts +++ b/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; diff --git a/types/waterfall.d.ts b/types/waterfall.d.ts index dfdbb9e4d..8beab86ba 100644 --- a/types/waterfall.d.ts +++ b/types/waterfall.d.ts @@ -2,7 +2,7 @@ import { DirectiveFunction, PluginFunction } from 'vue'; export interface Waterfall { (type: string): DirectiveFunction; - install: PluginFunction + install: PluginFunction; } export const Waterfall: Waterfall;