27 May, 2018

টিউটোরিয়াল

rimonmath

994 views


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>