Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

the best modal you can get

NotificationsYou must be signed in to change notification settings

vue-comps/vue-comps-modal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-comps-modal

the best modal you can get.

Install

npm install --save-dev vue-comps-modal

or includebuild/bundle.js.

Usage

# in your componentcomponents:"modal":require("vue-comps-modal")# or, when using bundle.jscomponents:"modal":window.vueComps.modal
<button> Open Modal<modal>    Content</modal></button>

For examples seedev/.

Note, that the modal will be appended todocument.body on first opening.

Props

Nametypedefaultdescription
opacityNumber0.5opacity of the overlay
not-dismissableBooleanfalsecan it get closed by click on overlay or ESC?
ignore-parentBooleanfalsewill not set-up click listener on parent
is-openedBooleanfalse(two-way) set to open / close
transitionString"modal"name of a vue transition.Detailed description
parentElementparentElementwhere to listen for open click
z-indexNumber1500minimum zIndex of the overlay, cannot be lower than 1000 (seevue-overlay for specifics)

Events

Namedescription
before-enterwill be called before open animation
after-enterwill be called when opened
before-leavewill be called before close animation
after-leavewill be called when closed
toggled(isOpened:Boolean)emitted when gets opened or closed. Alternative to use two-wayis-opened prop

Transition

You can provide a vue transition like this:

Vue.transition("fade",{// your transition})// or in the instance:transitions:{fade:{// your transition}}// usage:template:"<modal transition='fade'></modal>"

The background is managed byvue-overlay.Seehere for an example on how to change its fading function.

Changelog

  • 1.2.1
    close overlay on destroy

  • 1.2.0
    added toggled event
    set default transition

  • 1.1.1
    removed usage of$appendTo

  • 1.1.0
    now using vue transitions
    events are renamed after vue transitions

  • 1.0.0
    addedz-index prop
    removeclose event listening

Development

Clone repository.

npm installnpm run dev

Browse tohttp://localhost:8080/.

License

Copyright (c) 2016 Paul PflugradtLicensed under the MIT license.

About

the best modal you can get

Resources

Stars

Watchers

Forks

Packages

No packages published

[8]ページ先頭

©2009-2025 Movatter.jp