[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({