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>