# vue-popup

> A popup mixin for vue.js

Latest version **0.2.14** (published 2016-12-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-popup
pnpm add vue-popup
yarn add vue-popup
bun add vue-popup
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.14 |
| Published | 2016-12-20 |
| First published | 2015-12-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 75 |
| Author | baiyaaaaa |
| Maintainers | long.zhang |

## Links

- npm: https://www.npmjs.com/package/vue-popup
- Repository: git@github.com:ElemeFE/vue-popup.git/vue-popup
- Homepage: http://git@github.com:ElemeFE/vue-popup.git/vue-popup#readme
- npm.io page: https://npm.io/package/vue-popup

## Dependencies (1)

- [wind-dom](https://npm.io/package/wind-dom.md) 0.0.3

## Recent versions

- 0.2.14 (latest) — 2016-12-20
- 0.2.13 — 2016-12-20
- 0.2.12 — 2016-11-15
- 0.2.11 — 2016-11-13
- 0.2.10 — 2016-11-11
- 0.2.9 — 2016-10-17
- 0.2.8 — 2016-10-12
- 0.2.7 — 2016-10-11
- 0.1.13 — 2016-10-02
- 0.2.6 — 2016-10-02
- 0.2.5 — 2016-09-23
- 0.1.12 — 2016-09-20
- 0.2.4 — 2016-09-20
- 0.2.3 — 2016-08-29
- 0.2.2 — 2016-08-15
- … 24 more at https://npm.io/package/vue-popup/versions

## README

# Overview
vue-popup is a popup mixin for vue.js

# Installation
First, install `vue-popup` from npm:
```bash
$ npm install vue-popup
```

Then import it:
```javascript
import Popup from 'vue-popup';
require('vue-popup/lib/popup.css');
```

# Usage
In a vue instance, define its `mixins`:
```javascript
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`:
```html
<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:
```html
<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'  |

---
_Source: https://npm.io/package/vue-popup · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._