fix: incorrect vnode order in some cases (#6140)

This commit is contained in:
neverland 2020-04-26 21:40:44 +08:00 committed by GitHub
parent 50a4dc681c
commit 7102129601
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 49 additions and 6 deletions

View File

@ -162,7 +162,6 @@ export default createComponent({
const deltaTime = new Date() - this.touchStartTime;
const { offsetX = 0, offsetY = 0 } = this.$refs.swipe || {};
console.log('deltaTime', deltaTime);
// prevent long tap to close component
if (deltaTime < DOUBLE_CLICK_INTERVAL && offsetX < 10 && offsetY < 10) {
if (!this.doubleClickTimer) {

View File

@ -21,3 +21,25 @@ exports[`insert tab dynamically 1`] = `
</div>
</div>
`;
exports[`insert tab with child component 1`] = `
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">1<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">2<!----></span></div>
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">3<!----></span></div>
<div class="van-tabs__line"></div>
</div>
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane">1</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<!---->
</div>
</div>
</div>
`;

View File

@ -25,3 +25,25 @@ test('insert tab dynamically', async () => {
wrapper.setData({ insert: true });
expect(wrapper).toMatchSnapshot();
});
// this case will throw wierd error in index.spec.js
// so separate it
test('insert tab with child component', async () => {
const wrapper = mount({
template: `
<van-tabs v-model="active">
<van-tab title="1">1</van-tab>
<my-tab />
<van-tab title="3">3</van-tab>
</van-tabs>
`,
components: {
'my-tab': {
template: `<van-tab title="2">2</van-tab>`,
},
},
});
await later();
expect(wrapper).toMatchSnapshot();
});

View File

@ -7,6 +7,10 @@ function flattenVNodes(vnodes: VNode[]) {
vnodes.forEach((vnode) => {
result.push(vnode);
if (vnode.componentInstance) {
traverse(vnode.componentInstance.$children.map((item) => item.$vnode));
}
if (vnode.children) {
traverse(vnode.children);
}
@ -17,12 +21,8 @@ function flattenVNodes(vnodes: VNode[]) {
return result;
}
type VueInstance = {
$vnode: VNode;
};
// sort children instances by vnodes order
export function sortChildren(children: VueInstance[], parent: VueInstance) {
export function sortChildren(children: Vue[], parent: Vue) {
const { componentOptions } = parent.$vnode;
if (!componentOptions || !componentOptions.children) {
return;