[improvement] Tabs: use relation mixin

packages/tab/index.js

@@ -1,11 +1,11 @@
 /* eslint-disable object-shorthand */
 import { use } from '../utils';
-import { FindParentMixin } from '../mixins/find-parent';
+import { ChildrenMixin } from '../mixins/relation';
 
 const [sfc, bem] = use('tab');
 
 export default sfc({
-  mixins: [FindParentMixin],
+  mixins: [ChildrenMixin('vanTabs')],
 
   props: {
     title: String,
@@ -19,10 +19,6 @@ export default sfc({
   },
 
   computed: {
-    index() {
-      return this.parent.tabs.indexOf(this);
-    },
-
     selected() {
       return this.index === this.parent.curActive;
     }
@@ -38,24 +34,12 @@ export default sfc({
     }
   },
 
-  created() {
-    this.findParent('van-tabs');
-  },
-
   mounted() {
-    const { tabs } = this.parent;
-    const index = this.parent.slots().indexOf(this.$vnode);
-    tabs.splice(index === -1 ? tabs.length : index, 0, this);
-
     if (this.slots('title')) {
       this.parent.renderTitle(this.$refs.title, this.index);
     }
   },
 
-  beforeDestroy() {
-    this.parent.tabs.splice(this.index, 1);
-  },
-
   render(h) {
     const { slots } = this;
     const shouldRender = this.inited || !this.parent.lazyRender;

packages/tab/test/__snapshots__/index.spec.js.snap

@@ -6,15 +6,16 @@ exports[`change tabs data 1`] = `
     <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
       <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
       <div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
-      <div class="van-tab"><span class="van-ellipsis"></span></div>
+      <div class="van-tab">
+        <div><span>title2</span></div>
+      </div>
       <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane" style="">Text</div>
+    <div class="van-tab__pane">Text</div>
     <div class="van-tab__pane" style="display: none;">
       <!---->
-      <div><span>title2</span></div>
     </div>
     <div class="van-tab__pane" style="display: none;">
       <!---->
@@ -35,7 +36,7 @@ exports[`change tabs data 2`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane" style="">Text</div>
+    <div class="van-tab__pane">Text</div>
     <div class="van-tab__pane" style="display: none;">
       <!---->
     </div>
@@ -105,7 +106,7 @@ exports[`lazy render 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane" style="">Text</div>
+    <div class="van-tab__pane">Text</div>
     <div class="van-tab__pane" style="display: none;">
       <!---->
       <div><span>title2</span></div>
@@ -130,7 +131,7 @@ exports[`lazy render 2`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane" style="">Text</div>
+    <div class="van-tab__pane">Text</div>
     <div class="van-tab__pane" style="display: none;">
       Text
     </div>
@@ -149,7 +150,7 @@ exports[`render nav-left & nav-right slot 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane" style="">Text</div>
+    <div class="van-tab__pane">Text</div>
     <div class="van-tab__pane" style="display: none;">
       <!---->
       <div><span>title2</span></div>
@@ -165,7 +166,7 @@ exports[`swipe to switch tab 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
-      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
+      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
       <div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
       <div class="van-tab">
         <div><span>title2</span></div>
@@ -174,7 +175,7 @@ exports[`swipe to switch tab 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane" style="">Text</div>
+    <div class="van-tab__pane">Text</div>
     <div class="van-tab__pane" style="display: none;">
       <!---->
     </div>
@@ -189,9 +190,9 @@ exports[`swipe to switch tab 2`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
-      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
-      <div class="van-tab"><span class="van-ellipsis">title1</span></div>
-      <div class="van-tab van-tab--active">
+      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
+      <div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
+      <div class="van-tab">
         <div><span>title2</span></div>
       </div>
       <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
@@ -213,9 +214,9 @@ exports[`swipe to switch tab 3`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
-      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
-      <div class="van-tab"><span class="van-ellipsis">title1</span></div>
-      <div class="van-tab van-tab--active">
+      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
+      <div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
+      <div class="van-tab">
         <div><span>title2</span></div>
       </div>
       <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
@@ -237,7 +238,7 @@ exports[`swipe to switch tab 4`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
-      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
+      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
       <div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
       <div class="van-tab">
         <div><span>title2</span></div>

packages/tab/test/index.spec.js

@@ -88,6 +88,8 @@ test('swipe to switch tab', async () => {
 test('change tabs data', async () => {
   const wrapper = createWrapper();
 
+  await later();
+
   expect(wrapper).toMatchSnapshot();
 
   wrapper.setData({

packages/tabs/index.js

@@ -2,13 +2,19 @@ import { use, isDef } from '../utils';
 import { raf } from '../utils/raf';
 import { on, off } from '../utils/event';
 import { TouchMixin } from '../mixins/touch';
-import { setScrollTop, getScrollTop, getElementTop, getScrollEventTarget } from '../utils/scroll';
+import { ParentMixin } from '../mixins/relation';
+import {
+  setScrollTop,
+  getScrollTop,
+  getElementTop,
+  getScrollEventTarget
+} from '../utils/scroll';
 
 const [sfc, bem] = use('tabs');
 const tabBem = use('tab')[1];
 
 export default sfc({
-  mixins: [TouchMixin],
+  mixins: [TouchMixin, ParentMixin('vanTabs')],
 
   model: {
     prop: 'active'
@@ -59,7 +65,6 @@ export default sfc({
 
   data() {
     return {
-      tabs: [],
       position: '',
       curActive: null,
       lineStyle: {
@@ -76,7 +81,7 @@ export default sfc({
   computed: {
     // whether the nav is scrollable
     scrollable() {
-      return this.tabs.length > this.swipeThreshold || !this.ellipsis;
+      return this.children.length > this.swipeThreshold || !this.ellipsis;
     },
 
     wrapStyle() {
@@ -124,7 +129,7 @@ export default sfc({
       this.setLine();
     },
 
-    tabs() {
+    children() {
       this.correctActive(this.curActive || this.active);
       this.scrollIntoView();
       this.setLine();
@@ -218,7 +223,7 @@ export default sfc({
         /* istanbul ignore else */
         if (deltaX > 0 && curActive !== 0) {
           this.setCurActive(curActive - 1);
-        } else if (deltaX < 0 && curActive !== this.tabs.length - 1) {
+        } else if (deltaX < 0 && curActive !== this.children.length - 1) {
           this.setCurActive(curActive + 1);
         }
       }
@@ -283,8 +288,8 @@ export default sfc({
     // correct the value of active
     correctActive(active) {
       active = +active;
-      const exist = this.tabs.some(tab => tab.index === active);
-      const defaultActive = (this.tabs[0] || {}).index || 0;
+      const exist = this.children.some(tab => tab.index === active);
+      const defaultActive = (this.children[0] || {}).index || 0;
       this.setCurActive(exist ? active : defaultActive);
     },
 
@@ -294,7 +299,7 @@ export default sfc({
         this.$emit('input', active);
 
         if (this.curActive !== null) {
-          this.$emit('change', active, this.tabs[active].title);
+          this.$emit('change', active, this.children[active].title);
         }
         this.curActive = active;
       }
@@ -304,8 +309,8 @@ export default sfc({
       const diff = reverse ? -1 : 1;
       let index = active;
 
-      while (index >= 0 && index < this.tabs.length) {
-        if (!this.tabs[index].disabled) {
+      while (index >= 0 && index < this.children.length) {
+        if (!this.children[index].disabled) {
           return index;
         }
         index += diff;
@@ -314,7 +319,7 @@ export default sfc({
 
     // emit event when clicked
     onClick(index) {
-      const { title, disabled } = this.tabs[index];
+      const { title, disabled } = this.children[index];
       if (disabled) {
         this.$emit('disabled', index, title);
       } else {
@@ -400,7 +405,7 @@ export default sfc({
   render(h) {
     const { type, ellipsis, animated, scrollable } = this;
 
-    const Nav = this.tabs.map((tab, index) => (
+    const Nav = this.children.map((tab, index) => (
       <div
         ref="tabs"
         refInFor
@@ -425,7 +430,10 @@ export default sfc({
         <div
           ref="wrap"
           style={this.wrapStyle}
-          class={[bem('wrap', { scrollable }), { 'van-hairline--top-bottom': type === 'line' }]}
+          class={[
+            bem('wrap', { scrollable }),
+            { 'van-hairline--top-bottom': type === 'line' }
+          ]}
         >
           <div ref="nav" class={bem('nav', [type])} style={this.navStyle}>
             {this.slots('nav-left')}