chenjiahan/vodal

A Vue modal with animations.

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

vodal's Issues

Requires vue 2.5.9

Would like to use this but getting this error on installation, as run 2.5.17.
Advise please on how to overcome or can you update dependency list.

Side panel with vodal

First thanks a lot for your awesome work!

I am trying to create a side panel with vodal, my main problems are:

1. I don't know how to put vodal in the left, it always get centered
2. I cannot mix units for example height:100% and width:300px

Thanks in advance for any help

Disable width, height attributes

Hello. In Rodal exist ability to write custom style. What about Vodal? How can I disable or use different measures in width & height attributes?

Focus on input in vodal

Hi
I trying to focus on input in modal with $ref but not working.

I set ref on element like this:
<input type="number" ref="pcounts" v-model="Count"/>

Focus on it in method like this:
this.$refs.pcounts.focus();

How to avoid aligning inner component center?

I am embedding a monaco-editor in the vodal, however, all code in the editor are aligned center which is not expected, so I wonder how to avoid that?

Thanks for the nice lib and the reply!

How to use without any build system?

I am unable to find .min.js version. Would you please provide it?
I don't use any build system like npm or webpack. I just want to use this great plugin in Vue app. How to do that? Thanks.

The live demo is down

Hi, the live demo is down. Please fix it.

Vodal doesn't worl unless you build it in node_modules

Because of only source content in node_modules vodal doesn't work for me. I do not build node modules I just use content of their "build" or "dist" folders like in "vue-clickaway" or "vuejs-datepicker" components.

How do you integrate this into Laravel?

I like this package quite a lot.
However, I have an empty Laravel project and have been trying to install vodal into it, with no luck. I know the basics of vue.js but am still a beginner and have never used a Vue.js package in my laravel app before.

After running npm i -S vodal

Where does this code go? Help would be appreciated.

<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";

Where to include css animation files?

First of all, great library.

I am wondering where I would be able to include the css animation files? I have a Vue app working with Tailwind at the moment, and am trying to integrate this library with that, however, I am experiencing errors.

EDIT: Figured out I was making the mistake. Had to place a full reference to node_modules directory to get it to work for me within my main.js file..

Not closing on escape key

Not closing on escape key

Invalid prop: type check failed for prop "height". Expected Number, got String

    <vodal :show="showTerms" height="500" animation="rotate" @hide="showTerms = false">
        <terms-modal></terms-modal>
    </vodal>

the height is changed to 500px but the console shows this error:

Invalid prop: type check failed for prop "height". Expected Number, got String

:show in v-for cant change

hi
lock i want change :show="item.show"
but don't work
this is my method

popshow(item,index){
            	this.Comments[index].popshow
   }

Comments this is my object

and has a key[popshow] = false

this is god work when i give console but don't happen ...

so this is my template cod

<vodal :show="item.popshow" ....

how solve this problem...

not responsive

why is it not responsive?

provide minified version

Pls provide minified version so that we can directly use it without any build system

Auto size modal height

Is there a way of modal height be computed with the slot html?
My main problem is that for my use i cannot pass a fix height for the modal, because vary a lot depend on the form that user will trigger!

thanks

thanks for the best modal library for vue!
other libraries, e.g: vue-js-modal are badly broken.
keep up the good work!