Vue.js Overlay is a practical, modern and convenient overlay (popup) Vue.js component.
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.
npm install vuejs-overlay --save <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 } });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. |
"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>
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 } });| 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>Copyright (c) 2019 Fatih Koca