Vodal_带有动画的 Vue 模态框

Vodal

网站地址:https://chenjiahan.github.io/vodal/

GitHub:https://github.com/chenjiahan/vodal

网站描述:带有动画的 Vue 模态框

一款带有动画的vue模态框。

安装

npm i -S vodal

使用

<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
    }
  }
}

@import "vodal/common.css";
@import "vodal/rotate.css";

属性

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

事件

Name	Description
hide	triggers when dialog will hide
clickMask	triggers when mask clicked

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/3806

more>>

资源分类

Vodal