Ventana modal en Vue.js

Programación de una ventana modal con el Framework Vue.js usando el evento @click para darle interactividad

Las ventanas modales son una alternativa de diseño UX para gestionar un CRUD en una aplicación web puesto que su interactividad ofrece una mayor perfomance a la hora de escribir código. Entonces vayamos por el inicio.

¿QUÉ ES UNA VENTANA MODAL?

Una ventana modal es una ventana que se encuentra sobre todas las demas ventanas de la misma aplicación, hasta que se cierra o se abre otra ventana modal. Partiendo de esta definición establecemos que es una secciòn o div que esta sobre los demas elementos html.

  1. El diseño de la ventana modal depende los estilos u hojas en cascada CSS
  2. La interactividad depende del lenguaje en este caso javascript para tal efecto estamos usando vue.js

CÓDIGO DE UNA VENTANA MODAL CON VUE.JS

  1. Cargamos Vue.js de CDN la versión comprimida
  2. Declaramos el ámbito de acción de Vue en #app donde creamos un boton y la ventana modal
  3. Vemos claramente tres secciones : 
    1. HTML
    2. CSS
    3. JS
  4. Hacemos uso del evento @click, la directiva v-if para la implementación de la interactividad.
<!DOCTYPE html>
<html>
<head>
	<title>VENTANNA MODAL VUE.JS - APPTIVAWEB.COM</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.20/vue.min.js"></script>
</head>
<body>

	<div id="app">
		<button @click="ventana=true">hola</button>
		<div class="contenedor" v-if="ventana">
			<div class="modal">
				<div class="modalheader">					
					<div class="izquierda"><h1>hola</h1></div>
					<button class="derecha close" @click="ventana=false">x</button>
					<div class="clear"></div>
				</div>
				<div class="modalcontent">
					<p>contenidos</p>
				</div>
			</div>
		</div>
	</div>
	<style>
		.contenedor{
			background: rgba(0,0,0,0.5);
			top:0;
			position: fixed;
			left:0;
			width: 100%;
			height: 100%;
		}
		.modal{
			padding: 10px;
			width: 500px;			
			margin: 40px auto;
			background: white;
			box-shadow: 0px 0px 10px black;
		}
		.modalheader{
			background: #006699;
			margin: -10px;
			text-align: center;
		}
		h1{
			text-align: center;
			color:white;
		}
		.close{
			background: red;
			color:white;
		}
		.derecha{ float: right; }
		.izquierda{float: left;     width: 490px;}
		.clear{ clear: both; }
	</style>
	<script>
		var app=new Vue({
			el:"#app",
			data:{	ventana:false }
		})
	</script>
</body>
</html>

Pronto implementaremos un minicurso de VUE.JS  crud con php y msyql 

VIDEO Cómo crear una ventana modal con Vue.js con interactividad

Visitas: 285 | Publicado:2018-12-11 12:22:36

Más publicaciones de Vue.js que te pueden interesar:

Facebook Twitter Youtube Pinterest Wordpress Google Plus

:: Calle Paucarpata 130 Of. 212 2do Piso CC. AQPcompucentro ::
:: © Todos los derechos reservados APPTIVA WEB | Arequipa Perú 2010-2018 ::