Animation Dialog

Vue3动画模态框组件-AnimationDialog

特性

1. 可实现从点击元素打开Dialog的动画交互
2. 可使用animate.css动画进行dialog的打开与关闭
3. animate.css

为了优化包大小，组件只内置了BounceIn与BounceOut动画，使用animate.css模式时请自行引入animate.css样式文件

配置

1 Attrs 属性

|参数|说明|类型|可选值|默认值| |:---|:---|:---|:---|:---| |width|Dialog宽度|String|-|50vw| |height|Dialog高度|String|-|70vh| |animationMode|是否为animate.css模式打开，需自行引入animate.css|Boolean|-|false| |animationIn|当animationMode为true时有效，Dialog进入动画,参考animate.css|String|-|bounceIn| |animationOut|当animationMode为true时有效，Dialog离开动画,参考animate.css|String|-|bounceOut| |time|动画执行时间|Number|-|500| |timingFunction|当animationMode为false时有效，过渡动画曲线|String|-|cubic-bezier(0.55,-0.15, 0.71, 1.35)| |openFromItself|是否使用自身作为Dialog，即Dialog为点击的元素(但打开的其实为Clone的Dom)|Boolean|-|false| |appendToBody|是否将Dom插入到body中，防止父元素样式造成的异常|Boolean|-|false| |customClass|自定义Dialog的类名, 追加到.dialog上|String|-|-| |customWrapperClass|自定义Wrapper的类名，追加到.animation-dialog-wrapper上|String|-|-| |listenWindowSizeChange|是否需要监听Window宽度变化而改变dialog宽度,默认不监听|Boolean|-|false| |debounceWait|监听Window宽度变化的延迟时间|Number|-|200| |title|Dialog标题,V1.6.2后新增,样式内置,要自定义请使用slot|String|-|-| |closeOnClickOutside|是否点击Dialog外层后直接关闭Dialog|Boolean|-|true|

2 Methods 方法

|方法名|说明|参数| |:---|:---|:---| |open|打开Dialog|el (在默认模式下，需要传实现交互的Dom，即点击元素，不传默认从中间打开)| |close|关闭Dialog|-|

3 Events 事件

|事件名|说明|回调参数| |:---|:---|:---| |beforeClose|关闭动画前执行事件|-| |close|关闭动画后执行事件|-|

4 Slot

|插槽名|说明| |:---|:---| |title|Dialog标题| |footer|Dialog页脚|

Package umd name: HowdyAnimationDialog