A popup mixin for vue.js
JavaScript Vue CSS HTML Makefile
Latest commit 786f1de Oct 2, 2016 @Leopoldthecoder Leopoldthecoder 0.1.13

README.md

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'