[bugfix] find correct index of vnode in bindRelation (#4009)

src/dropdown-menu/test/__snapshots__/index.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`click option 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">B</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2011;" name="van-popup-slide-top">
@@ -24,7 +24,7 @@ exports[`click option 1`] = `
 
 exports[`close-on-click-outside 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-overlay" style="z-index: 2006; position: absolute; animation-duration: 0.2s; display: none;" name="van-fade"></div>
@@ -83,7 +83,7 @@ exports[`direction up 1`] = `
 
 exports[`disable close-on-click-outside 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-overlay" style="z-index: 2008; position: absolute; animation-duration: 0.2s;" name="van-fade"></div>
@@ -115,7 +115,7 @@ exports[`disable dropdown item 1`] = `
 
 exports[`render option icon 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-overlay" style="z-index: 2004; position: absolute; animation-duration: 0.2s;" name="van-fade"></div>
@@ -240,7 +240,7 @@ exports[`title prop 1`] = `
 
 exports[`toggle method 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);"><div class="van-ellipsis"></div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-overlay" style="z-index: 2014; position: absolute; animation-duration: 0s;" name="van-fade"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2015;" name="van-popup-slide-top"></div>
@@ -250,7 +250,7 @@ exports[`toggle method 1`] = `
 
 exports[`toggle method 2`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
+  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis"></div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2015; display: none;" name="van-popup-slide-top"></div>
   </div>

src/goods-action/demo/index.vue

@@ -1,3 +1,4 @@
+
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
@@ -82,12 +83,10 @@ export default {
       title2: 'Icon info'
     }
   },
-
   methods: {
     onClickIcon() {
       this.$toast(this.$t('clickIcon'));
     },
-
     onClickButton() {
       this.$toast(this.$t('clickButton'));
     }

src/mixins/relation.ts

@@ -1,9 +1,26 @@
-import Vue from 'vue';
+import Vue, { VNode } from 'vue';
 
 type ChildrenMixinOptions = {
   indexKey?: any;
 };
 
+function flattenVNodes(vnodes: VNode[]) {
+  const result: VNode[] = [];
+
+  function traverse(vnodes: VNode[]) {
+    vnodes.forEach(vnode => {
+      result.push(vnode);
+
+      if (vnode.children) {
+        traverse(vnode.children);
+      }
+    });
+  }
+
+  traverse(vnodes);
+  return result;
+}
+
 export function ChildrenMixin(parent: string, options: ChildrenMixinOptions = {}) {
   const indexKey = options.indexKey || 'index';
 
@@ -25,7 +42,7 @@ export function ChildrenMixin(parent: string, options: ChildrenMixinOptions = {}
       }
     },
 
-    created() {
+    mounted() {
       this.bindRelation();
     },
 
@@ -37,21 +54,15 @@ export function ChildrenMixin(parent: string, options: ChildrenMixinOptions = {}
 
     methods: {
       bindRelation() {
-        if (!this.parent) {
+        if (!this.parent || this.parent.children.indexOf(this) !== -1) {
           return;
         }
 
-        const { children } = this.parent;
+        const children = [...this.parent.children, this];
+        const vnodes = flattenVNodes(this.parent.slots());
+        children.sort((a, b) => vnodes.indexOf(a.$vnode) - vnodes.indexOf(b.$vnode));
 
-        if (children.indexOf(this) === -1) {
+        this.parent.children = children;
-          const vnodeIndex = this.parent.slots().indexOf(this.$vnode);
-
-          if (vnodeIndex === -1) {
-            children.push(this);
-          } else {
-            children.splice(vnodeIndex, 0, this);
-          }
-        }
       }
     }
   });

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

@@ -155,11 +155,11 @@ exports[`name prop 1`] = `
       <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
       <div role="tab" class="van-tab"><span class="van-ellipsis">title2</span></div>
       <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
-      <div class="van-tabs__line"></div>
+      <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel" class="van-tab__pane">Text</div>
+    <div role="tabpanel" class="van-tab__pane" style="">Text</div>
     <div role="tabpanel" class="van-tab__pane" style="display: none;">
       <!---->
     </div>