Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report] 基于动态组件使用tab组件时, 生产环境下新增tab后title位置渲染错误 #12677

Open
Lisheri opened this issue Mar 13, 2024 · 2 comments

Comments

@Lisheri
Copy link

Lisheri commented Mar 13, 2024

重现链接

https://github.com/Lisheri/vant/blob/fix/dynamic_tab/packages/vant/src/tab/demo/index.vue

demo第一个可以复现

Vant 版本

4.8.5

描述一下你遇到的问题。

基于动态组件使用包裹后的tab组件, 动态新增tab时候生产环境下无法渲染出正确的顺序(仅title渲染错误)

原因在于 tab中调用useParent link时在生产环境下调用flattenVNodes方法时无法从父节点的subTree上获取到当前插入的最新的tab所对应的vnode, 导致位置计算错误, 只能插入到最后

image
image
image
image

点击新增后, 在拍平后的vnodes集合中找不到新增的vnode, 因此插入顺序错误

重现步骤

以下均需要生产环境:

  1. 基于Tab包裹新的Tab组件
  2. 基于动态组件引入包裹后的Tab
  3. 在tabs下循环渲染上述动态组件
  4. 动态新增tab到对应位置
  5. 无论插入节点到何处, 均渲染到最后

设备/浏览器

chrome 版本 121.0.6167.184(正式版本) (arm64)

@namefhf
Copy link

namefhf commented Mar 16, 2024

这是啥字体😳

@Lisheri
Copy link
Author

Lisheri commented Mar 16, 2024

这是啥字体😳

Fira Code

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants