vue-popup

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'