Simple Modal window Vue.js component

栏目: IT技术 · 发布时间: 5年前

内容简介: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

Simple Modal window Vue.js component

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 .


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

亚马逊跨境电商运营宝典

亚马逊跨境电商运营宝典

老魏 / 电子工业出版社 / 2018-6 / 69

《亚马逊跨境电商运营宝典》详细讲解亚马逊的平台知识和运营技巧,内容围绕亚马逊卖家的日常工作,系统讲解亚马逊账号注册、后台操作、选品、产品发布、Listing 优化、站内广告、FBA 发货、VAT 税务等内容,并且通过大量的案例分析,用生动翔实的案例为读者传递运营中必备的操作技巧和运营方法。 《亚马逊跨境电商运营宝典》内容针对性强,讲解的知识、技巧和方法都充分考虑到易学、易懂、易操作、易落地执......一起来看看 《亚马逊跨境电商运营宝典》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具