内容简介:Simple Modal window Vue.js component that takes care of overlay, centering, animation, outside click/Can be used for alerts, modals, dialogs etc.
Modal Window
Simple Modal window Vue.js component that takes care of overlay, centering, animation, outside click/ Escape key/ X-mark closing and allows you to concentrate on its content only
Can be used for alerts, modals, dialogs etc.
How to use
You can install it via npm
npm install @vuesence/modal-window --save
or just copy/paste ModalWindow.vue component code into your Vue.js project
Usage:
<template> <div id="app"> <p>Click the button to open modal window</p> <button @click="showModal = true">Open Modal</button> <modal-window :visible="showModal" :close-on-escape="true" :close-on-outside-click="true" :show-x-mark="true" @close="showModal = false" > <h2>Modal window</h2> <p>Here be content</p> </modal-window> </div> </template>
import ModalWindow from "@vuesence/modal-window";
...
data() {
return {
showModal: false
};
}
All the props ( close-on-escape , close-on-outside-click , show-x-mark ) are optional. Above listed their default values
showModal property is used to open\close the window
There can be several instances of the ModalWindow.vue
Styling and animation can be customized - check out ModalWindow.vue 's <style> section for CSS class names
Demo
https://altrusl.github.io/vuesence-modal-window/
Playground
Try it on codesandbox.io
Check out my other Vue.js components
- Vuesence book - minimalistic Vue.js based documentation component
- Sliding header - Vue.js component representing sliding header (or two different headers)
- Cloud Sync Button - a button with cloud synchronization animation
You like Vuesence Modal Window? Star it and retweet it!
Troubleshooting
Any bugs, issues, feature and pull requests are welcome
Please use GitHub's issue reporter or send me an email
Contribution
Contribution is always welcome and recommended. Here is how:
- Fork the repository
- Clone to your machine
- Make your changes
- Create a pull request
License
@vuesence/modal-windowpackage is freely distributable under the terms of the MIT license .
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
乔布斯离开了,马斯克来了
[日]竹内一正 / 干太阳 / 中信出版社 / 2015-11
在电动汽车的创新上,特斯拉抓住了一个群体的独特需求,外形很酷,不烧油,智能化控制。所有的颠覆式创新都不是敲锣打鼓来的,而是隐藏在一片噪声里,马斯克给我们带来的特斯拉虽然不尽完美,但他做产品的思维和执着于未来的勇气,值得学习。埃隆•马斯克创办公司也不是为了赚钱,而是为了拯救人类和地球,电动汽车、太阳能发电、宇宙火箭,不管是哪一项都足以令一个国家付出巨大的代价去研究开发,但埃隆•马斯克却一个人在做这些......一起来看看 《乔布斯离开了,马斯克来了》 这本书的介绍吧!