<h2>Overview</h2>
<p>The Vodal Dependency is a well-crafted Vue modal component that stands out due to its smooth animations and flexibility. Designed for developers who crave aesthetic and functional pop-ups, this modal can enhance user experiences with its versatile features. Whether you’re building a simple form or a complex notification system, Vodal provides the tools to tailor modals to fit any application.</p>
<h2>Features</h2>
<ul>
<li><strong>Customizable Width and Height</strong>: Set specific dimensions for your modal with <code>width</code> and <code>height</code> properties, allowing for a personalized design approach.</li>
<li><strong>Display Control</strong>: The <code>show</code> property allows you to easily toggle the modal's visibility, ensuring that it appears when you want it to.</li>
<li><strong>Animation Options</strong>: Choose from various animation types, including <code>zoom</code>, <code>fade</code>, and <code>slide</code>, to make modal transitions visually appealing.</li>
<li><strong>Close Button Functionality</strong>: The <code>closeButton</code> feature enables or disables the close button, giving users control over modal dismissal.</li>
<li><strong>Keyboard Interaction</strong>: With <code>closeOnEsc</code>, users can quickly close the modal using the ESC key, enhancing usability.</li>
<li><strong>Mask Click Handling</strong>: Set <code>closeOnClickMask</code> to true, allowing users to dismiss the modal by clicking outside of it on the mask, providing an intuitive experience.</li>
<li><strong>Styling Flexibility</strong>: Customize the modal’s appearance with <code>customStyles</code> and <code>customMaskStyles</code>, making it easy to integrate into various design schemes.</li>
<li><strong>Event Handling</strong>: React to user actions with events like <code>hide</code> and <code>clickMask</code> to create interactive experiences tailored to user engagement.</li>
</ul>


Chenjiahan

Vodal