27 May, 2018

টিউটোরিয়াল

rimonmath

2557 views


Vue JS 2 বাংলা টিউটোরিয়াল #12: Component communications and custom events এর সোর্স কোড :

 

 

 

style.css:

body{
	background: #e3e3e3;
}
.panel{
	width: 960px;
	margin: 44px auto;
	border: 1px solid #c5c0c0;
	background: #EEEEEE;
}

.panelTitle{
	background: #D1D1D1;
	font-weight: bold;
	padding: 9px;
	color: #505050;
}

.panelContent{
	padding: 22px;
	background: #fff;			
	min-height: 111px;
}

.close{
	float: right;
	cursor: pointer;
	padding: 0 9px;
}
.close:hover{
	background: #C85454;
}

/*=============Modal==================*/

.modal{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0, 0.5);
}

.modalContent{
	width: 960px;
	background: #fff;
	margin-top: 99px;
	margin-left: auto;
	margin-right: auto;
}

.modalHeader{
	background: #efefef;
	font-weight: bold;
	padding: 16px 9px;
	color: #505050;
}

.modalBody{
	padding: 22px;
	background: #fff;			
	min-height: 222px;
}

.modalFooter{
	background: #D1D1D1;
	font-weight: bold;
	padding: 9px;
	color: #505050;
}

 

index.html:

<!DOCTYPE html>
<html>
<head>
	<title>Vue Js Bangla Tutorial</title>	
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="root">
	<button @click="showLogin = true">Login</button>
	
	<modal v-if="showLogin" @onsave="showLogin = false" @oncancel="showLogin = false">
		<template slot="header"> 
			Login Now
		</template>

		<template slot="body"> 
			<h1>Enter your name</h1>
			<input type="text" name="">
		</template>
	</modal>
</div>

<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
	Vue.component("modal", {
		template: `
			<div class="modal">
				<div class="modalContent">
					<div class="modalHeader">
						<slot name="header"></slot>
					</div>
					<div class="modalBody">
						<slot name="body"></slot>
					</div>

					<div class="modalHeader">
						<button @click="$emit('onsave')">Save</button>
						<button @click="$emit('oncancel')">Cancel</button>
					</div>
				</div>
			</div>	

		`,

		props: ["modalTitle"],
		data: function(){
			return {
				show: true
			}
		}
	});


	var app = new Vue({
		el: "#root",
		data: {
			showLogin: false
		}
	});
	
</script>

</body>
</html>