diff --git a/README.md b/README.md index 3b3475cc..95df5ce8 100644 --- a/README.md +++ b/README.md @@ -155,6 +155,12 @@ And include the `` component it in your project: ``` +Alternatively, the modals container can be automatically appended to the document body once the plugin is loaded using `injectModalsContainer: true`: + +```js +Vue.use(VModal, { dynamic: true, injectModalsContainer: true }) +``` + Call it (the first argument is the component definition, the second are component properties, the third modal parameters, and the fourth the modal event listeners): ```javascript diff --git a/src/Modal.vue b/src/Modal.vue index 12fa2af3..5c0d7399 100644 --- a/src/Modal.vue +++ b/src/Modal.vue @@ -346,7 +346,7 @@ export default { /** * Returns class list for click outside overlay (background click) */ - backgroundClickClass() { + backgroundClickClass () { return ['v--modal-background-click'] }, /** diff --git a/src/ModalsContainer.vue b/src/ModalsContainer.vue index 1559f1b7..ae29a736 100644 --- a/src/ModalsContainer.vue +++ b/src/ModalsContainer.vue @@ -29,9 +29,9 @@ export default { methods: { add (modal, params, config, events) { let id = this.uid++ - config = config ? Object.assign({}, config) : {}; + config = config ? Object.assign({}, config) : {} if (!config.name) { - config.name = '_dynamic-modal-' + id; + config.name = '_dynamic-modal-' + id } this.modals.push({ id: id, diff --git a/src/index.js b/src/index.js index 643c616f..ca260cab 100644 --- a/src/index.js +++ b/src/index.js @@ -57,7 +57,13 @@ const Plugin = { * Registration of component */ if (options.dynamic) { - Vue.component('modals-container', ModalsContainer) + if (options.injectModalsContainer) { + const modalsContainer = document.createElement('div') + document.body.appendChild(modalsContainer) + new Vue({ render: h => h(ModalsContainer) }).$mount(modalsContainer) + } else { + Vue.component('modals-container', ModalsContainer) + } } } }