vue-teleport-modal
v0.1.6-1
Published
## Before use 'vue-teleport-modal', you have to install and apply 'EventBus'
Downloads
45
Maintainers
Readme
vue-teleport-modal
Before use 'vue-teleport-modal', you have to install and apply 'EventBus'
Note that you have to regist name of EventBus as '$eventBus'.
('vue-teleport-modal' call eventBus API through '$eventBus')
ex) below is what happened inside method 'this.$modal.show'
this.$eventBus.$emit('toggle-modal', 'modalName', true)
Vue3 doesn't support EventBus API, so you have to install tiny-emitter or mitt
Usage
Install
npm install --save vue-teleport-modal
Regist Plugin
import modal from 'vue-teleport-modal'
app.use(modal)
Use Modal component
c.f.) I set teleport's disabled option as 'false' but you can pass 'disabled' parameter c.f.) "'parentNode' and 'modalName'" is required args
// Modal component registered globally
<template>
<div id="modal-parent">
</div>
<modal parentNode="#modal-parent" :modalName="modalName">
<div class="green-box"></div>
</modal>
<button @click="showModal">Open Modal!</button>
<button @click="hideModal">Hide Modal!</button>
<button @click="hideAllModal">Hide All Modal!</button>
</template>
<script>
export default {
name: 'App',
data() {
return {
modalName: 'sampleModal'
}
},
created() {
},
methods: {
showModal() {
this.$modal.show(this.modalName);
},
hideModal() {
this.$modal.hide(this.modalName);
},
hideAllModal() {
this.$modal.hideAll();
}
}
}
</script>
<style scoped>
.green-box {
background-color: green;
width: 100px;
height: 100px;
}
</style>
You can use @before-open and @before-close
<modal @before-open="beforeOpen" @before-close="beforeClose" parentNode="#modal-parent" :modalName="modalName">
<Your Html>
</modal>
Version
ex) 0.1.3-2 (first.second.third-fourth)
- first : When 'second' exceed 9 or Big usage change, increase 'first'
- second : When 'third' exceed 9, increase 'second'
- third : When add methods or refactor code, increase 'third'
- fourth : When correct typo or change of comment