ihuangmx/code@vue@nav-tab-component.html

## code@vue@nav-tab-component.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.css">
</head>
<body>
	<div id="root" class="container">
		<zen-tabs>
			<tab name="图片" :selected="true">图片视图</tab>
			<tab name="音乐">音乐视图</tab>
			<tab name="文档">文档视图</tab>
			<tab name="视频">视频视图</tab>
		</zen-tabs>
	</div>

	<script type="text/javascript">
		Vue.component('tab',{
			props: {
				name:{require:true},
				selected: {default:false}
			},
			template:`
				<div v-show="isActive">
					<slot></slot>
				</div>
			`,
			mounted(){
				this.isActive = this.selected;
			},
			data(){
				return {
					isActive:false
				}
			},
			computed:{
				href(){
					return '#' + this.name.toLowerCase().replace(/ /g,'-');
				}
			}
		});
		Vue.component('zen-tabs',{
			template:`
				<div>
					<div class="tabs">
						<ul>
							<li v-for="tab in tabs" :class="{'is-active':tab.isActive=== true}" @click="selectTab(tab)">
								<a :href="tab.href">{{tab.name}}</a>
							</li>
						</ul>
					</div>
					<div><slot></slot></div>
				</div>
			`,
			mounted(){
				this.tabs = this.$children;
			},
			data(){
				return {
					tabs:[]
				}
			},
			methods:{
				selectTab(selectedTab){
					this.tabs.forEach(function(tab){
						tab.isActive= (selectedTab.name == tab.name);
					})
				}
			}
		});
		var vm = new Vue({
			el:"#root"
		});

	</script>

</body>