vue-teleport-modal

Before use 'vue-teleport-modal', you have to install and apply 'EventBus'

check eventBus and main.js

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