/vuejs-overlay

Overlay (popup) component for Vue.js

Primary LanguageVueMIT LicenseMIT

vuejs-overlay

Travis Build Version Downloads

Vue.js 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>

animate: zoom-in

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