index.html:
标签页组件标签一的内容
标签二的内容
标签三的内容
var app = new Vue({
el: '#app',
data: {
activeKey: '1'
}
})
pane.js:
Vue.component('pane', {
name: 'pane',
template: '\
\
props: {
name: {
type: String
},
label: {
type: String,
default: ''
}
},
data: function () {
return {
show: true
}
},
methods: {
updateNav () {
this.$parent.updateNav();
}
},
watch: {
label () {
this.updateNav();
}
},
mounted () {
this.updateNav();
}
})
tabs.js:
Vue.component('tabs', {
template: '\
\
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
}
]
},
getTabs () {
return this.$children.filter(function (item) {
return item.$options.name === 'pane';
});
},
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();
}
}
})
style.css:
[v-cloak] {
display: none;
}
.tabs {
font-size: 14px;
color: #657180;
}
.tabs-bar:after{
content: '';
display: block;
width: 100%;
height: 1px;
background: #d7dde4;
margin-top: -1px;
}
.tabs-tab {
display: inline-block;
padding: 4px 16px;
margin-right: 6px;
background: #fff;
border: 1px solid #d7dde4;
cursor: pointer;;
position: relative;
}
.tabs-tab-active {
color: #3399ff;
border-top: 1px solid #3399ff;
border-bottom: 1px solid #fff;
}
.tabs-tab-active:before{
content: '';
display: block;;
height: 1px;
background: #3399ff;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.tabs-content {
padding: 8px 0;
}
扫一扫
681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
