vuejs-overlay

Vue.js Overlay is a practical, modern and convenient overlay (popup) Vue.js component.

What?

It is a stylish popup component for Vue.js that you can easily use in your projects.
The most important features are flexible, modern, animated, stable, lightweight.

Install

npm install vuejs-overlay --save

Usage

<div id="app">
    <overlay :opened="opened" :visible="visible" @closed="opened = visible = false">
        <span>My popup</span>
    </overlay>
    
    <button @click="opened = visible = true">Open Popup</button>
</div>

// ES6
import Overlay from 'vuejs-overlay';
 
new Vue({
    el: '#app',
    data() {
        return {
            opened: false,
            visible: false
        }
    },
    components: {
        Overlay
    }
});

---

Configurations

You can make the configurations with props.

Configuration	Type	Default	Description
animate	String, Boolean	false	You can choose which animation the popup will open and close.
backdrop	Boolean	true	Specifies whether the popup has a backdrop.
close-on-escape	Boolean	true	This is to close the popup with the escape key.
close-on-cancel	Boolean	true	This is to close the popup with the cancel button.
close-by-backdrop-click	Boolean	true	This is to close the popup when the backdrop is clicked.
closeable	Boolean	true	Closing feature of the popup. You can use it in critical form operations.
opened	Boolean	false	Specifies the popup is opened.
header	String, Boolean	false	Used to determine the header text of the popup.
visible	Boolean	false	Specifies that internal elements are loaded of the popup.

Available animate options:

"bounce", "fade", "slide-down", "slide-left", "slide-right", "slide-up", "zoom-in", "zoom-out", false.

<overlay animate="zoom-in" :opened="opened" :visible="visible" @closed="opened = visible = false">
    <div>👍</div>
</overlay>

Usage asynchronously:

Let's take an example of content data with ajax. In this example we used vuejs-ajax library.

<div id="app">
    <overlay :opened="opened" :visible="visible" @closed="onClosed">
        <span v-text="text"></span>
    </overlay>
    
    <button @click="openHandle">Open Popup</button>
</div>

import ajax from "vuejs-ajax";
import {Overlay} from 'vuejs-overlay.js';
Vue.use(ajax);
 
new Vue({
    el: '#app',
    data() {
        return {
            opened: false,
            visible: false,
            text: null,
        }
    },
    methods: {
        openHandle() {
            this.overlayOpened = true;
 
            Vue.ajax.get("example.com/my-request-url").then(response => {
                this.text = response.data;
                this.visible = true;
            });
        },
        onClosed() {
            this.opened = false;
            this.visible = false;
        }
    },
    components: {
        Overlay
    }
});

---

Events

Configuration	Type	Description
@closed	Callback	Triggers when the popup is closed. We recommend that you use this to ensure stable operation of this component when closing the popup.
@opened	Callback	Triggers when the popup is opened.

<overlay :opened="opened" :visible="visible" @closed="opened = visible = false" @opened="someCallback">
    <span>My popup</span>
</overlay>

---

License

MIT

Copyright (c) 2019 Fatih Koca