Skip to content

Commit bf71879

Browse files
chenjiahanchenjiahan
authored
[bugfix] find correct index of vnode in bindRelation (youzan#4009)
1 parent 4d8c4df commit bf71879

4 files changed

Lines changed: 33 additions & 23 deletions

File tree

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`click option 1`] = `
44
<div class="van-dropdown-menu van-hairline--top-bottom">
5-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
5+
<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>
66
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
77
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
88
<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`] = `
2424

2525
exports[`close-on-click-outside 1`] = `
2626
<div class="van-dropdown-menu van-hairline--top-bottom">
27-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
27+
<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>
2828
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
2929
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
3030
<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`] = `
8383

8484
exports[`disable close-on-click-outside 1`] = `
8585
<div class="van-dropdown-menu van-hairline--top-bottom">
86-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
86+
<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>
8787
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
8888
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
8989
<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`] = `
115115

116116
exports[`render option icon 1`] = `
117117
<div class="van-dropdown-menu van-hairline--top-bottom">
118-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
118+
<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>
119119
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
120120
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
121121
<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`] = `
240240

241241
exports[`toggle method 1`] = `
242242
<div class="van-dropdown-menu van-hairline--top-bottom">
243-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
243+
<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>
244244
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
245245
<div class="van-overlay" style="z-index: 2014; position: absolute; animation-duration: 0s;" name="van-fade"></div>
246246
<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`] = `
250250

251251
exports[`toggle method 2`] = `
252252
<div class="van-dropdown-menu van-hairline--top-bottom">
253-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
253+
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis"></div></span></div>
254254
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
255255
<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>
256256
</div>

‎src/goods-action/demo/index.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
<template>
23
<demo-section>
34
<demo-block :title="$t('basicUsage')">
@@ -82,12 +83,10 @@ export default {
8283
title2: 'Icon info'
8384
}
8485
},
85-
8686
methods: {
8787
onClickIcon() {
8888
this.$toast(this.$t('clickIcon'));
8989
},
90-
9190
onClickButton() {
9291
this.$toast(this.$t('clickButton'));
9392
}

‎src/mixins/relation.ts‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,26 @@
1-
import Vue from 'vue';
1+
import Vue, { VNode } from 'vue';
22

33
type ChildrenMixinOptions = {
44
indexKey?: any;
55
};
66

7+
function flattenVNodes(vnodes: VNode[]) {
8+
const result: VNode[] = [];
9+
10+
function traverse(vnodes: VNode[]) {
11+
vnodes.forEach(vnode => {
12+
result.push(vnode);
13+
14+
if (vnode.children) {
15+
traverse(vnode.children);
16+
}
17+
});
18+
}
19+
20+
traverse(vnodes);
21+
return result;
22+
}
23+
724
export function ChildrenMixin(parent: string, options: ChildrenMixinOptions = {}) {
825
const indexKey = options.indexKey || 'index';
926

@@ -25,7 +42,7 @@ export function ChildrenMixin(parent: string, options: ChildrenMixinOptions = {}
2542
}
2643
},
2744

28-
created() {
45+
mounted() {
2946
this.bindRelation();
3047
},
3148

@@ -37,21 +54,15 @@ export function ChildrenMixin(parent: string, options: ChildrenMixinOptions = {}
3754

3855
methods: {
3956
bindRelation() {
40-
if (!this.parent) {
57+
if (!this.parent || this.parent.children.indexOf(this) !== -1) {
4158
return;
4259
}
4360

44-
const { children } = this.parent;
61+
const children = [...this.parent.children, this];
62+
const vnodes = flattenVNodes(this.parent.slots());
63+
children.sort((a, b) => vnodes.indexOf(a.$vnode) - vnodes.indexOf(b.$vnode));
4564

46-
if (children.indexOf(this) === -1) {
47-
const vnodeIndex = this.parent.slots().indexOf(this.$vnode);
48-
49-
if (vnodeIndex === -1) {
50-
children.push(this);
51-
} else {
52-
children.splice(vnodeIndex, 0, this);
53-
}
54-
}
65+
this.parent.children = children;
5566
}
5667
}
5768
});

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,11 +155,11 @@ exports[`name prop 1`] = `
155155
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
156156
<div role="tab" class="van-tab"><span class="van-ellipsis">title2</span></div>
157157
<div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
158-
<div class="van-tabs__line"></div>
158+
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
159159
</div>
160160
</div>
161161
<div class="van-tabs__content">
162-
<div role="tabpanel" class="van-tab__pane">Text</div>
162+
<div role="tabpanel" class="van-tab__pane" style="">Text</div>
163163
<div role="tabpanel" class="van-tab__pane" style="display: none;">
164164
<!---->
165165
</div>

0 commit comments

Comments
 (0)