Vue JS 2 বাংলা টিউটোরিয়াল #13 Practical component example এর সোর্স কোড :
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;
}
/*===============Tab===============*/
.tab{
border: 1px solid #4C4C4C;
width: 960px;
min-height: 111px;
background: #FFFFFF;
margin: 44px auto;
}
.tab ul{
margin: 0;
list-style: none;
background: #B5B5B5;
}
.tab li{
display: inline-block;
cursor: pointer;
padding: 9px;
margin-top: 9px;
}
.tab li.active{
background: #FFFFFF;
}
.details{
padding: 44px;
}
components.js:
var Event = new Vue();
Vue.component("tabs", {
template: `
<div class="tab">
<ul>
<li v-for="tab in tabs" :class="{'active': tab.selectedNow}" @click="makeEvent(tab.name)">
{{tab.name}}
</li>
</ul>
<div class="details">
<slot></slot>
</div>
</div>
`,
props: ["activeTab"],
data: function(){
return {
tabs: []
}
},
mounted: function(){
this.tabs = this.$children;
//console.log(this.tabs);
},
methods: {
makeEvent: function(s){
Event.$emit('tabchange', s);
}
}
});
Vue.component("tab", {
template: `<div v-if="selectedNow">
<slot></slot>
</div>
`,
props: ['selected', "name"],
data: function(){
return {
selectedNow: false
}
},
created: function(){
var currentVue = this;
currentVue.selectedNow = currentVue.selected;
Event.$on("tabchange", function(s){
if(s == currentVue.name){
currentVue.selectedNow = true;
} else{
currentVue.selectedNow = false;
}
});
}
});
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">
<tabs>
<tab name="Tab1" :selected="true">
Tab1 content... <button>btn1</button>
</tab>
<tab name="Tab2">
Tab2 content...
</tab>
<tab name="Tab3">
Tab3 content...
</tab>
</tabs>
<div class="tab">
<ul>
<li class="active">
Tab1
</li>
<li class="">
Tab2
</li>
<li class="">
Tab3
</li>
</ul>
<div class="details">
<div> Tab1 content... <button>btn1</button></div>
<div></div>
<div></div>
</div>
</div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="components.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#root",
data: {
activeTabName: "Tab1"
}
});
</script>
</body>
</html>