|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
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: {
type: [String,Number]
}
},
data: function(){
return {
currentValue: this.value,
navList: []
}
},
methods: {
tabCls: function(item){
return [
'tabs-tab',
{
'tabs-tab-active': item.name===this.currentValue
}
]
},
//遍历所有为pane的子元素
getTabs(){
return this.$children.filter(function(item){
return item.$options.name==='pane';
});
},
//将pane子元素中label name放进navList数组
updateNav() {
this.navList=[];
var _this=this;
this.getTabs().forEach(function(pane,index){
_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();
var _this=this;
//显示当前正在选中的
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();
}
}
})
|
