vue模态框弹窗动画
沃达尔 (Vodal)
A Nice vue modal with animations.
带有动画的尼斯vue模态。
安装
npm i -S vodal
用法
<template> <div class="home"> <button @click="togglebox">点击弹出</button> <vodal :show="show" animation="rotate" @hide="show = false"> <div>A vue modal with animations.</div> </vodal> </div> </template> <script> import Vodal from "vodal"; export default { name: "name", components: { Vodal, }, data() { return { show: false, }; }, methods: { togglebox: function () { this.show = true; }, }, }; </script> <style lang="scss" scoped> // include animation styles @import "../../node_modules/vodal/common.css"; @import "../../node_modules/vodal/rotate.css"; </style>
效果
道具 (Props )
事件 (Event)
动画类型 (Animation Types)
- zoom
放大 - fade
褪色 - flip
翻转 - door
门 - rotate
旋转 - slideUp
向上滑动 - slideDown
滑下 - slideLeft
向左滑动 - slideRight
向右滑动