diff --git a/platform/nativescript/plugins/modal-plugin.js b/platform/nativescript/plugins/modal-plugin.js index b3ad00da..0f18d0a7 100644 --- a/platform/nativescript/plugins/modal-plugin.js +++ b/platform/nativescript/plugins/modal-plugin.js @@ -1,4 +1,6 @@ +import { isObject, isDef, isPrimitive } from 'shared/util' import { updateDevtools } from '../util' +import { VUE_ELEMENT_REF } from '../renderer/ElementNode' let sequentialCounter = 0 @@ -18,6 +20,16 @@ function serializeModalOptions(options) { .join(', ') } +function getTargetView(target) { + if (isObject(target) && isDef(target.$el)) { + return target.$el.nativeView + } else if (isDef(target.nativeView)) { + return target.nativeView + } else if (target[VUE_ELEMENT_REF]) { + return target + } +} + function _findParentModalEntry(vm) { if (!vm) { return false @@ -65,14 +77,20 @@ export default { } // build options object with defaults - options = Object.assign({}, options, { - context: null, - closeCallback: closeCb - }) + options = Object.assign( + { + target: this.$root + }, + options, + { + context: null, + closeCallback: closeCb + } + ) const navEntryInstance = new Vue({ name: 'ModalEntry', - parent: this.$root, + parent: options.target, methods: { closeCb }, @@ -85,7 +103,7 @@ export default { const modalPage = navEntryInstance.$mount().$el.nativeView updateDevtools() - this.$root.nativeView.showModal(modalPage, options) + getTargetView(options.target).showModal(modalPage, options) }) } } diff --git a/samples/app/modals-on-top-of-modals.js b/samples/app/modals-on-top-of-modals.js new file mode 100644 index 00000000..a87d31ab --- /dev/null +++ b/samples/app/modals-on-top-of-modals.js @@ -0,0 +1,87 @@ +const Vue = require('nativescript-vue') +// const VueDevtools = require('nativescript-vue-devtools') + +// Vue.use(VueDevtools) + +Vue.config.debug = true +Vue.config.silent = false + +const SecondaryModal = { + name: 'SecondaryModalComponent', + template: ` + + + + +