vuejs-overlay v0.0.28

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.

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

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

License

MIT

Copyright (c) 2019 Fatih Koca