vue-overlay

vue-overlay

To mask out the background when a dialog / modal or similar is opened, a overlay is needed.

Demo

Features

• singleton & z-index management to allow stacking
• background doesn't move when scroll gets disabled

Used in

• side-nav
• modal

Install

npm install --save-dev vue-overlay
// vue@1.0
npm install --save-dev vue-overlay@1

or include build/bundle.js.

Usage

overlay = require("vue-overlay")(Vue)
# or, when using bundle.js
overlay = window.vueComps.overlay

For examples see dev/. If you need to reliable get the Vue instance, see vue-mixins/vue

{zIndex, close} = overlay.open(options)

• zIndex - the z-index of the opened overlay - will be raised by 5 for each overlay
• close(callHooks=true) - shortcut for overlay.close(options,callHooks) - options will be the same instance used for opening
• Options

overlay.close(options=lastOverlay, callHooks=true)

• options the options object which was used to open a overlay
• callHooks set to false to suppress the calls of onBeforeClose and onClosed of that overlay

overlay.fade({el,opacity,cb})

overwrite to add a animation

• el the div element of the overlay
• opacity the target opacity of the opening/closing
• cb a function which must be called when finished

vue-overlay is a singleton, so a fade function provided like this, will be used globally. Only do this once:

Velocity = require("velocity-animate")
Overlay = require("vue-overlay")
Overlay.obj.methods.fade = function ({el,opacity,cb}) {
  Velocity(el, {opacity: opacity}, {
    duration: 300,
    queue: false,
    easing: 'easeOutQuad',
    complete: cb
  })
}

Changelog

• 2.0.0
  now compatible with vue 2.0.0

Development

Clone repository

npm install
npm run dev

Browse to http://localhost:8080/.

License

Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.