0

Vodal

带有动画的 vue 模态。「A vue modal with animations.」

官方網站
Github 資源庫
主要指標

Github星跟蹤圖

Vodal Dependency Status NPM downloads

A vue modal with animations.
Example

Installation

npm i -S vodal

Usage

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

// include animation styles
@import "vodal/common.css";
@import "vodal/rotate.css";

Props

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

Event

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

Animation Types

  • zoom
  • fade
  • flip
  • door
  • rotate
  • slideUp
  • slideDown
  • slideLeft
  • slideRight

Other

React version

主要指標

概覽
名稱與所有者chenjiahan/vodal
主編程語言CSS
編程語言HTML (語言數: 5)
平台
許可證MIT License
所有者活动
創建於2017-01-16 11:11:49
推送於2024-03-28 17:38:03
最后一次提交2024-01-10 10:14:38
發布數7
最新版本名稱2.3.3 (發布於 )
第一版名稱1.0.2 (發布於 )
用户参与
星數380
關注者數10
派生數58
提交數70
已啟用問題?
問題數17
打開的問題數4
拉請求數39
打開的拉請求數4
關閉的拉請求數1
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?