From 86360a6df10a8022fecfbf6e7445d0f8b11d8521 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Mon, 21 Sep 2020 17:31:41 +0300 Subject: [PATCH] Restore to 2.x --- src/components/tabpanel/TabPanel.vue | 8 ------- src/components/tabview/TabView.vue | 34 +++++++++++++++++++++++----- 2 files changed, 28 insertions(+), 14 deletions(-) diff --git a/src/components/tabpanel/TabPanel.vue b/src/components/tabpanel/TabPanel.vue index 5a819cd61..e9cd4745f 100755 --- a/src/components/tabpanel/TabPanel.vue +++ b/src/components/tabpanel/TabPanel.vue @@ -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); } } \ No newline at end of file diff --git a/src/components/tabview/TabView.vue b/src/components/tabview/TabView.vue index 5e69c3bb6..5f3ad675f 100755 --- a/src/components/tabview/TabView.vue +++ b/src/components/tabview/TabView.vue @@ -4,7 +4,7 @@
  • {{tab.header}} - +
  • @@ -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 }