Overview
vue-popup is a popup mixin for vue.js
Installation
First, install vue-popup
from npm:
$ npm install vue-popup
Then import it:
;;
Usage
In a vue instance, define its mixins
:
mixins: Popup
Then vue-popup
's APIs(see below) are accessible via the vue instance's props
attribute.
Example
Goal: on your page you have a button. When it's clicked, an alert pops up.
First let's deal with the alert component in alert.vue
:
Alert!
As you can see, v-if="rendered"
and v-show="visible"
should be added on the outermost tag of the component. Its props
attribute has two keys: modal
and closeOnClickModal
, please refer to API below for detailed information.
That's it for the alert component. Let's move on to the main page:
Open Dialog
Note that the main page's alertVisible
syncs with the component's visible
, so when the button is clicked, alertVisible
becomes true
thus the alert component pops up.
API
Option | Description | Value | Default |
---|---|---|---|
visible | visibility of the popup element | Boolean | 'false' |
openDelay | time before the popup element opens | Number, in millisecond | |
closeDelay | time before the popup element closes | Number, in millisecond | |
zIndex | z-index of the popup element | Number | |
modal | determines if a modal pops with the popup element | Boolean | 'false' |
modalClass | class name of the modal | String | |
closeOnPressEscape | determines if the popup element closes when escape is clicked | Boolean | 'false' |
closeOnClickModal | determines if the popup element closes when the modal is clicked | Boolean | 'false' |