vodal

A vue modal with animations.
20,491 376
vue dialog modal animation
Install
npm install vodal
Latest Version:2.4.0
Vue:2
License:MIT
Last Updated:Mar 28, 2024
Links: GitHub  ·  npm
Maintainer: chenjiahan

Vodal Dependency Status NPM downloads

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

Related Packages

vuedl

Vue dialog helper

17,871 29
dialog modal vue
vue-final-modal

The most powerful yet most light-weight modal library for Vue 3.

3,105,553 1,013
dialog modal vue popup
jenesius-vue-modal

The progressive and simple modal system for Vue.js v3

198,410 159
dialog modal vue vue3
vue-vaul

A drawer component for Vue

9,592 0
dialog modal vue drawer
vudal

Another modal window for vue

6,889 38
dialog modal vue window

Version History

Version Released License
2.4.0 MIT
2.3.3 MIT
2.3.2 MIT
2.3.1 MIT
2.3.0 MIT