<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签页组件</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app" v-cloak>
<tabs v-model="activeKey">
<pane label="标签1" name="1">
标签1的内容
</pane>
<pane label="标签2" name="2">
标签2的内容
</pane>
<pane label="标签3" name="3">
标签3的内容
</pane>
</tabs>
</div>
</body>
</html>
<script src="jquery-3.1.1.js"></script>
<script src="vue.js"></script>
<script>
Vue.component('pane', {
name: 'pane',
template: '
<div class="pane" v-show="show">
<slot></slot>
</div>',
props: {
name: {
type: String
},
label: {
type: String,
default: ''
}
},
data: function() {
return {
show: true
}
},
methods: {
updateNav() {
this.$parent.updateNav();
}
},
watch: {
lable() {
this.updateNav();
}
},
mounted() {
this.updateNav();
}
});
Vue.component('tabs', {
template: '
<div class="tabs">
<div class="tabs-bar">
<div :class="tabCls(item)" v-for="(item,index) in navList" @click="handleChange(index)">{{item.label}}</div>
</div>
<div class="tabs-content">
<slot></slot>
</div>
</div>',
props: {
value: { //这里用于v-model绑定，好像只能用value，而不能用其他关键字; value 就是动态索引（指定哪一个标签处于活动状态）
type: [String, Number]
}
},
data: function() {
return {
currentValue: this.value,
navList: []
}
},
methods: {
tabCls: function(item) {
var temp_xx = [
'tabs-tab', {
'tabs-tab-active': item.name === this.currentValue
}
];
//秘诀：将对象转为json字符串
//动态类:["tabs-tab",{"tabs-tab-active":true}]
temp_xx = JSON.stringify(temp_xx);
console.log("动态类:" + temp_xx);
return temp_xx;
},
getTabs() {
return this.$children.filter(function(item) {
//console.log(item.$options);
//console.log('----------------------');
//返回标签的名字是“pane”的子孙
return item.$options.name === 'pane';
});
},
updateNav() {
this.navList = [];
var _this = this;
this.getTabs().forEach(function(pane, index) {
//console.log('lable:' + pane.label);
//console.log('name:' + pane.name);
//console.log('-----------');
_this.navList.push({
label: pane.label,
name: pane.name || index
});
if (!pane.name)
pane.name = index;
if (index === 0) {
if (!_this.currentValue) {
_this.currentValue = pane.name || index;
}
}
});
this.updateStatus();
},
updateStatus() {
var tabs = this.getTabs();
//console.log('符合条件的tabs-----------');
//console.log(tabs);
var _this = this;
//每个标签是否显示，取决于它的变量"show";而变量“show”是否为“true”取决于它的name是否为currentValue
tabs.forEach(function(tab) {
return tab.show = (tab.name === _this.currentValue);
});
},
handleChange: function(index) {
var nav = this.navList[index];
var name = nav.name;
this.currentValue = name;
this.$emit('input', name);
this.$emit('on-click', name);
}
},
watch: {
value: function(val) {
this.currentValue = val;
},
currentValue: function() {
this.updateStatus();
}
}
});
var app = new Vue({
el: '#app',
data: {
activeKey: '1'
}
});
</script>