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] 使用keep-alive包裹text-ellipsis切换两个组件时,text-ellipsis组件渲染异常 #12445

Closed
codeblockhead opened this issue Nov 15, 2023 · 2 comments · Fixed by #12741
Assignees

Comments

@codeblockhead
Copy link

重现链接

https://codesandbox.io/s/vant-4-issue-template-forked-2npm4v?file=/src/App.vue

Vant 版本

4.7.1

描述一下你遇到的问题。

text-ellipsis组件,如果在keep-alive组件包裹的情况下,如果没有被挂载成功,切换到另一个组件,再次切换回来时,将会出现渲染异常

重现步骤

  1. 进入页面,点击标签2
  2. 在标签二的内容未完全渲染完成,3s内迅速切换到标签1
  3. 等待到标签二的内容渲染完成后,再切换回标签二
    image

设备/浏览器

chrome

@wjw-gavin
Copy link
Collaborator

其实我感觉这算不上一个 bug 吧?就像在 create 生命周期去获取 DOM 节点无法获取一样...,没挂载成功就没办法根据容器去计算省略的内容。可以试试把 lazy-render 设置 false 试试看。

@codeblockhead
Copy link
Author

其实我感觉这算不上一个 bug 吧?就像在 create 生命周期去获取 DOM 节点无法获取一样...,没挂载成功就没办法根据容器去计算省略的内容。可以试试把 lazy-render 设置 false 试试看。

这是配合keep-alive使用出现的bug,和tabs组件无关,由于我的项目中大量使用了keep-alive缓存组件,导致了如果频繁切换tab或分页切换tab,经常出现渲染异常的情况,导致页面出现大量渲染成“...”
image
这是一个bug,你需要在组件在keep-alive重新激活时判断是否计算异常,来判断是否重新计算。

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

Successfully merging a pull request may close this issue.

3 participants