Restore to 2.x
parent
8eae5039fe
commit
86360a6df1
|
@ -21,14 +21,6 @@ export default {
|
|||
active(newValue) {
|
||||
this.d_active = newValue;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (!this.$parent.tabs.includes(this)) {
|
||||
this.$parent.tabs.push(this);
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.$parent.tabs = this.$parent.tabs.filter(tab => tab !== this);
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -4,7 +4,7 @@
|
|||
<li role="presentation" v-for="(tab, i) of tabs" :key="tab.header || i" :class="[{'p-highlight': (tab.d_active), 'p-disabled': tab.disabled}]">
|
||||
<a role="tab" class="p-tabview-nav-link" @click="onTabClick($event, tab)" @keydown="onTabKeydown($event, tab)" :tabindex="tab.disabled ? null : '0'" :aria-selected="tab.d_active" v-ripple>
|
||||
<span class="p-tabview-title" v-if="tab.header">{{tab.header}}</span>
|
||||
<component :is="tab.$slots.header"></component>
|
||||
<TabPanelHeaderSlot :tab="tab" v-if="tab.$scopedSlots.header" />
|
||||
</a>
|
||||
</li>
|
||||
<li ref="inkbar" class="p-tabview-ink-bar"></li>
|
||||
|
@ -19,12 +19,28 @@
|
|||
import DomHandler from '../utils/DomHandler';
|
||||
import Ripple from '../ripple/Ripple';
|
||||
|
||||
const TabPanelHeaderSlot = {
|
||||
functional: true,
|
||||
props: {
|
||||
tab: {
|
||||
type: null,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
render(createElement, context) {
|
||||
return [context.props.tab.$scopedSlots['header']()];
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabs: []
|
||||
d_children: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.d_children = this.$children;
|
||||
},
|
||||
updated() {
|
||||
let activeTab = this.tabs[this.findActiveTabIndex()];
|
||||
if (!activeTab && this.tabs.length) {
|
||||
|
@ -69,12 +85,18 @@ export default {
|
|||
},
|
||||
updateInkBar() {
|
||||
let tabHeader = this.$refs.nav.children[this.findActiveTabIndex()];
|
||||
if (tabHeader) {
|
||||
this.$refs.inkbar.style.width = DomHandler.getWidth(tabHeader) + 'px';
|
||||
this.$refs.inkbar.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
|
||||
}
|
||||
this.$refs.inkbar.style.width = DomHandler.getWidth(tabHeader) + 'px';
|
||||
this.$refs.inkbar.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tabs() {
|
||||
return this.d_children.filter(child => child.$vnode.tag.indexOf('tabpanel') !== -1);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'TabPanelHeaderSlot': TabPanelHeaderSlot
|
||||
},
|
||||
directives: {
|
||||
'ripple': Ripple
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue