mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-26 00:09:15 +08:00
[bugfix] find correct index of vnode in bindRelation (#4009)
This commit is contained in:
parent
4d8c4df5fe
commit
bf71879988
@ -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>
|
||||
|
@ -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'));
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user