https://github.com/chenjiahan/vodal

A Vue modal with animations.
https://github.com/chenjiahan/vodal

animation dialog modal vue

Last synced: 10 days ago
JSON representation

A Vue modal with animations.

• Host: GitHub
• URL: https://github.com/chenjiahan/vodal
• Owner: chenjiahan
• License: mit
• Created: 2017-01-16T11:11:49.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2024-03-28T17:38:03.000Z (8 months ago)
• Last Synced: 2024-10-04T09:24:38.429Z (about 1 month ago)
• Topics: animation, dialog, modal, vue
• Language: CSS
• Homepage: https://chenjiahan.github.io/vodal/
• Size: 1.63 MB
• Stars: 379
• Watchers: 12
• Forks: 58
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - vodal - 动画的vue模态 (UI组件)
• awesome-github-vue - vodal - 动画的vue模态 (UI组件)
• awesome-github-vue - vodal - 动画的vue模态 (UI组件)
• awesome - vodal - 动画的vue模态 (UI组件)

README

        
# Vodal [![Dependency Status](https://david-dm.org/chenjiahan/rodal.svg?style=flat-square)](https://david-dm.org/chenjiahan/vodal) [![NPM downloads](http://img.shields.io/npm/dm/rodal.svg?style=flat-square)](https://npmjs.org/package/vodal)

A vue modal with animations.

[Example](http://rodal.cn)

## Installation    

    npm i -S vodal

    

## Usage

``` xml

    
A vue modal with animations.


```

``` javascript

import Vue from 'vue';

import Vodal from 'vodal';

Vue.component(Vodal.name, Vodal);

export default {

  name: 'app',

    

  data() {

    return {

      show: false

    }

  }

}

```

``` sass

// 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](https://github.com/chenjiahan/rodal)