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

This commit is contained in:
neverland 2019-07-31 11:10:33 +08:00 committed by GitHub
parent 4d8c4df5fe
commit bf71879988
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 33 additions and 23 deletions

View File

@ -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>

View File

@ -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'));
}

View File

@ -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) {
const vnodeIndex = this.parent.slots().indexOf(this.$vnode);
if (vnodeIndex === -1) {
children.push(this);
} else {
children.splice(vnodeIndex, 0, this);
}
}
this.parent.children = children;
}
}
});

View File

@ -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>