Insert your modal component instance into the Vue.prototype, then trigger the show/hide methods wherever you have access to the Vue instance context.
Check out the demo below:
let vm = null // the instance for your Vue modal
let timeout = null //async/delay popup
const SModal = {
isActive: false,
show ({
delay = 500,
message = '',
customClass = 'my-modal-class'
} = {}) {
if (this.isActive) {
vm && vm.$forceUpdate()
return
}
timeout = setTimeout(() => {
timeout = null
const node = document.createElement('div')
document.body.appendChild(node)
let staticClass = ''
vm = new this.__Vue({
name: 's-modal',
el: node,
render (h) {
return h('div', {
staticClass,
'class': customClass,
domProps: {
innerHTML: message
}
})
}
})
}, delay)
this.isActive = true
},
hide () {
if (!this.isActive) {
return
}
if (timeout) {
clearTimeout(timeout)
timeout = null
} else {
vm.$destroy()
document.body.removeChild(vm.$el)
vm = null
}
this.isActive = false
},
__Vue: null,
__installed: false,
install ({ $my, Vue }) {
if (this.__installed) { return }
this.__installed = true
$my.SModal = SModal
this.__Vue = Vue
}
}
let installFunc = function (_Vue, opts = {}) {
if (this.__installed) {
return
}
this.__installed = true
const $my = {
'memo': 'I am a plugin management.'
}
if (opts.plugins) {
Object.keys(opts.plugins).forEach(key => {
const p = opts.plugins[key]
if (typeof p.install === 'function') {
p.install({ $my, Vue: _Vue })
}
}
}
_Vue.prototype.$my = $my
}
Vue.use(installFunc, {
plugins: [SModal]
})
app = new Vue({
el: "#app",
data: {
'test 1': 'Cat in Boots'
},
methods: {
openModal: function () {
this.$my.SModal.show({'message':'test', 'delay':1000})
},
closeModal: function () {
this.$my.SModal.hide()
}
}
})
.my-modal-class {
position:absolute;
top:50px;
left:20px;
width:100px;
height:100px;
background-color:red;
z-index:9999;
}
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a7c7f6f4a38243f243b3c">[email protected]</a>/dist/vue.js"></script>
<div id="app">
<button @click="openModal()">Open Modal!!!</button>
<button @click="closeModal()">Close Modal!!!</button>
</div>
Rough Steps for vue-cli project:
In ./plugins/SModal.js (refer to the official documentation to create a Vue instance and add it to the document.body):
let vm = null // the instance for your Vue modal
let timeout = null
const SModal = {
isActive: false,
show ({
delay = 500,
message = '',
customClass = ''
} = {}) {
if (this.isActive) {
vm && vm.$forceUpdate()
return
}
timeout = setTimeout(() => {
timeout = null
const node = document.createElement('div')
document.body.appendChild(node)
vm = new this.__Vue({
name: 's-modal',
el: node,
render (h) {
return h('div', {
staticClass,
'class': props.customClass
})
}
})
}, delay)
this.isActive = true
},
hide () {
if (!this.isActive) {
return
}
if (timeout) {
clearTimeout(timeout)
timeout = null
} else {
vm.$destroy()
document.body.removeChild(vm.$el)
vm = null
}
this.isActive = false
},
__Vue: null,
__installed: false,
install ({ $my, Vue }) {
if (this.__installed) { return }
this.__installed = true
$my.SModal = SModal
this.__Vue = Vue
}
}
export default SModal
As per the official documentation, A Vue.js plugin should expose an install method. The method will be called with the Vue constructor as the first argument, along with possible options
In install.js:
// loop all plugins under the folder ./plugins/, then install it.
export default function (_Vue, opts = {}) {
if (this.__installed) {
return
}
this.__installed = true
const $my = {
'memo': 'I am a plugin management.'
}
if (opts.plugins) {
Object.keys(opts.plugins).forEach(key => {
const p = opts.plugins[key]
if (typeof p.install === 'function') {
p.install({ $my, Vue: _Vue })
}
})
}
_Vue.prototype.$my = $my
}
In main.js:
import install from './install'
import * as plugins from './plugins'
Vue.use({ install }, {
plugins
})
Finally, in your view/component, you can interact with your modal like this:
this.$my.SModal.show()
this.$my.SModal.hide()