Vodal

A vue modal with animations. Example

Installation

npm i -S vodal

Usage

<vodal :show="show" animation="rotate" @hide="show = false">
    <div>A vue modal with animations.</div>
</vodal>

import Vue from 'vue';
import Vodal from 'vodal';

Vue.component(Vodal.name, Vodal);

export default {
  name: 'app',
    
  data() {
    return {
      show: false
    }
  }
}

// include animation styles
@import "vodal/common.css";
@import "vodal/rotate.css";

Props

Property|Type|Default|Description ---|---|---|--- width|number|400|width of dialog height|number|240|height of dialog measure|string|px|measure of width and height show|bool|false|whether to show dialog mask|bool|true|whether to show mask closeButton|bool|true|whether to show close button closeOnEsc|bool|false|whether close dialog when esc pressed closeOnClickMask|bool|true|whether close dialog when mask clicked animation|string|zoom|animation type duration|number|300|animation duration className|string|/|className for the container customStyles|object|/|custom dialog styles customMaskStyles|object|/|custom mask styles

Event

Name|Description ---|--- hide|triggers when dialog will hide clickMask|triggers when mask clicked

Animation Types

• zoom
• fade
• flip
• door
• rotate
• slideUp
• slideDown
• slideLeft
• slideRight

Other

React version