77 lines
1.4 KiB
JavaScript
77 lines
1.4 KiB
JavaScript
|
export default {
|
||
|
|
props: {
|
||
|
|
stopPropagation: {
|
||
|
|
type: Boolean,
|
||
|
|
required: false,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
currentIndex: 0,
|
||
|
|
tabs: [],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.updateTabs();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
updateTabs() {
|
||
|
|
this.tabs = this.$children.filter(child => child.isTab);
|
||
|
|
this.currentIndex = this.tabs.findIndex(tab => tab.localActive);
|
||
|
|
},
|
||
|
|
setTab(e, index) {
|
||
|
|
if (this.stopPropagation) {
|
||
|
|
e.stopPropagation();
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
|
||
|
|
this.tabs[this.currentIndex].localActive = false;
|
||
|
|
this.tabs[index].localActive = true;
|
||
|
|
|
||
|
|
this.currentIndex = index;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
render(h) {
|
||
|
|
const navItems = this.tabs.map((tab, i) =>
|
||
|
|
h(
|
||
|
|
'li',
|
||
|
|
{
|
||
|
|
key: i,
|
||
|
|
},
|
||
|
|
[
|
||
|
|
h(
|
||
|
|
'a',
|
||
|
|
{
|
||
|
|
class: tab.localActive ? 'active' : null,
|
||
|
|
attrs: {
|
||
|
|
href: '#',
|
||
|
|
},
|
||
|
|
on: {
|
||
|
|
click: e => this.setTab(e, i),
|
||
|
|
},
|
||
|
|
},
|
||
|
|
tab.$slots.title || tab.title,
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
);
|
||
|
|
const nav = h(
|
||
|
|
'ul',
|
||
|
|
{
|
||
|
|
class: 'nav-links tab-links',
|
||
|
|
},
|
||
|
|
[navItems],
|
||
|
|
);
|
||
|
|
const content = h(
|
||
|
|
'div',
|
||
|
|
{
|
||
|
|
class: ['tab-content'],
|
||
|
|
},
|
||
|
|
[this.$slots.default],
|
||
|
|
);
|
||
|
|
|
||
|
|
return h('div', {}, [[nav], content]);
|
||
|
|
},
|
||
|
|
};
|