zoukankan      html  css  js  c++  java
  • vue中实现模态框弹出框动画(旋转弹出)

    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 )
    PropertyTypeDefaultDescription
    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
    属性类型默认描述
    宽度 400 对话宽度
    高度 240 对话高度
    测量 像素 宽度和高度的度量
    表演 布尔 是否显示对话框
    面具 布尔 真正 是否戴面具
    closeButton 布尔 真正 是否显示关闭按钮
    closeOnEsc 布尔 按下esc时是否关闭对话框
    closeOnClickMask 布尔 真正 单击蒙版时是否关闭对话框
    动画 放大 动画类型
    持续时间 300 动画时长
    班级名称 / 容器的className
    customStyles 目的 / 自定义对话框样式
    customMaskStyles 目的 / 自定义蒙版样式

    事件 (Event)

    NameDescription
    hide triggers when dialog will hide
    clickMask triggers when mask clicked
    名称描述
    隐藏 对话框隐藏时触发
    clickMask 单击蒙版时触发

    动画类型 (Animation Types)

    • zoom

      放大

    • fade

      褪色

    • flip

      翻转

    • door

    • rotate

      旋转

    • slideUp

      向上滑动

    • slideDown

      滑下

    • slideLeft

      向左滑动

    • slideRight

      向右滑动

  • 相关阅读:
    JDBC 实例--JDBC通过工具类DBUtil连接到数据库,让我们不再恐惧操作数据库
    揭开JDBC的神秘面纱,让JDBC数据库的连接参数不再神秘
    实验六 最小代价生成树
    实验五 背包问题和带时限的作业排序
    实验四 图的遍历算法设计与实现
    实验三 跳表算法设计与实现
    实验二 伸展树算法设计与实现
    算法实例一 算法问题求解基础--欧几里得递归算法和递归算法
    2013年 蓝桥杯预赛 java 本科A 题目
    java常用开发工具类之 图片水印,文字水印,缩放,补白工具类
  • 原文地址:https://www.cnblogs.com/huilixieqi/p/13754846.html
Copyright © 2011-2022 走看看