vue-popup v0.2.14
Overview
vue-popup is a popup mixin for vue.js
Installation
First, install vue-popup
from npm:
$ npm install vue-popup
Then import it:
import Popup from 'vue-popup';
require('vue-popup/lib/popup.css');
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
:
<template>
<div v-if="rendered" v-show="visible" class="alert">
<p>Alert!</p>
</div>
</template>
<style>
.alert {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<script>
import Popup from 'vue-popup';
require('vue-popup/lib/popup.css');
export default {
mixins: [Popup],
props: {
modal: {
default: true
},
closeOnClickModal: {
default: true
}
}
};
</script>
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:
<template>
<button @click="alertVisible = true">Open Dialog</button>
<alert :visible.sync="alertVisible"></alert>
</template>
<script>
const Alert = require('./alert.vue');
export default {
components: { Alert },
data() {
return {
alertVisible: false
};
}
};
</script>
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' |
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago