Skip to content
New issue

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

#

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

Already on GitHub? # to your account

Jump to bottom

[Nuxt3]grid组件服务端渲染后自适应有问题，需要手动缩放才能与客户端渲染一样 #2462

Closed
Baiyuetribe opened this issue Feb 18, 2022 · 8 comments
Closed

[Nuxt3]grid组件服务端渲染后自适应有问题，需要手动缩放才能与客户端渲染一样 #2462

Baiyuetribe opened this issue Feb 18, 2022 · 8 comments
Labels
bug Something isn't working

Comments

@Baiyuetribe
Copy link
Contributor

TuSimple/naive-ui version (版本)

2.25.2

Vue version (Vue 版本)

3.2.31

Browser and its version (浏览器及其版本)

Chrome

System and its version (系统及其版本)

Windows

Node version (Node 版本)

Reappearance link (重现链接)

https://stackblitz.com/edit/github-mbmlr5-pbzrrz?file=app.vue

Reappearance steps (重现步骤)

grid erro

其余组件在nuxt3里均正常工作，唯独grid组件自适应有问题，实际服务端渲染的首屏无法识别屏幕大小，采用了最小屏效果，手动缩放屏幕后恢复正常，与客户端渲染一样。

Expected results (期望的结果)

期望服务端渲染后的效果与客户端渲染保持一样

Actual results (实际的结果)

Remarks (补充说明)

个人能力有限，但是该组件确实很重要，希望可以解决
@github-actions github-actions bot added the untriaged need to sort label Feb 18, 2022
@07akioni 07akioni added bug Something isn't working and removed untriaged need to sort labels Feb 19, 2022
@Baiyuetribe
Copy link
Contributor Author

根据这几天的实际使用，Nuxt3里naive-ui组件功能都正常，唯独grid响应有问题。类似的，经过测试，element plus和@inkline/inkline服务端渲染正常，盲猜是独立出css所以无异常，缺点是这两个是全部引入css，不像naive-ui是自动按需引入的。
一个正常案例 【inkline模板】：https://stackblitz.com/edit/github-nw7fzh-k8c3nd?file=app.vue
Baiyuetribe/nuxt3-naive-ui-starter#5 (comment)

@07akioni
Copy link
Collaborator

07akioni commented Feb 25, 2022 •
edited
Loading

根据这几天的实际使用，Nuxt3里naive-ui组件功能都正常，唯独grid响应有问题。类似的，经过测试，element plus和@inkline/inkline服务端渲染正常，盲猜是独立出css所以无异常，缺点是这两个是全部引入css，不像naive-ui是自动按需引入的。 一个正常案例 【inkline模板】：https://stackblitz.com/edit/github-nw7fzh-k8c3nd?file=app.vue Baiyuetribe/nuxt3-naive-ui-starter#5 (comment)

出 css 确实是一个思路，这个提示了我，基于屏幕宽度的 grid ssr 时候是可以不闪的

@Baiyuetribe
Copy link
Contributor Author

该问题应该通用与任意SSR渲染工具，不局限于Nuxt3的SSR模式，要不搞个简单点的纯依赖vite的SSR模式？这样便于开发和调试，要是能跟其他组件一样用CSS抽离解决，估计SSR就正常了

@07akioni
Copy link
Collaborator

07akioni commented Mar 1, 2022

根据这几天的实际使用，Nuxt3里naive-ui组件功能都正常，唯独grid响应有问题。类似的，经过测试，element plus和@inkline/inkline服务端渲染正常，盲猜是独立出css所以无异常，缺点是这两个是全部引入css，不像naive-ui是自动按需引入的。 一个正常案例 【inkline模板】：https://stackblitz.com/edit/github-nw7fzh-k8c3nd?file=app.vue Baiyuetribe/nuxt3-naive-ui-starter#5 (comment)

出 css 确实是一个思路，这个提示了我，基于屏幕宽度的 grid ssr 时候是可以不闪的

我研究了一下，因为 naive 支持了折叠等功能，所以还是不能光靠 CSS

@07akioni
Copy link
Collaborator

07akioni commented Mar 1, 2022 •
edited
Loading

这个事比我想象的复杂一些，感觉不是很好解决

要想完善的解决第一需要解决 tail + collapsed 的功能

第二需要解决不闪的问题，这两块代码会不太好处理

@Baiyuetribe
Copy link
Contributor Author

这个事比我想象的复杂一些，感觉不是很好解决

要想完善的解决第一需要解决 tail + collapsed 的功能

第二需要解决不闪的问题，这两块代码会不太好处理

不闪烁的问题好办，用vue的过渡特效Transion就可以解决

@07akioni
Copy link
Collaborator

07akioni commented Mar 2, 2022

这个事比我想象的复杂一些，感觉不是很好解决
要想完善的解决第一需要解决 tail + collapsed 的功能
第二需要解决不闪的问题，这两块代码会不太好处理

不闪烁的问题好办，用vue的过渡特效Transion就可以解决

我们说的不是一回事，我说的是这些内容只要上屏了就不会再改

@Baiyuetribe Baiyuetribe mentioned this issue Apr 2, 2022
Closed
@keuby keuby mentioned this issue Jun 19, 2022
Merged
@07akioni
Copy link
Collaborator

closed in a89f8b1

07akioni added a commit that referenced this issue Jun 21, 2022
@07akioni
fix(grid): doesn't adjust it's content to fit responsive config in SS…
a89f8b1 
…R page, closes #2462
Keekuun pushed a commit to Keekuun/naive-ui that referenced this issue Jun 22, 2022
@07akioni
fix(grid): doesn't adjust it's content to fit responsive config in SS…
25ed99a 
…R page, closes tusen-ai#2462
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@07akioni @Baiyuetribe