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.

Sign up for GitHub

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

Jump to bottom

菜单折叠按钮设置底部，页面宽度缩小至960 ，菜单折叠事件失效 #3605

Closed
SanpLee opened this issue Feb 18, 2024 · 4 comments
Closed

菜单折叠按钮设置底部，页面宽度缩小至960 ，菜单折叠事件失效 #3605

SanpLee opened this issue Feb 18, 2024 · 4 comments
Labels
pr welcome Welcome developers to submit Pull Requests to the project

Comments

@SanpLee
Copy link

SanpLee commented Feb 18, 2024 •
edited
Loading

描述 Bug

菜单折叠按钮设置底部，页面宽度缩小至960 ，菜单折叠事件失效

image

以下是项目设置，

image

image

系统信息

  • 操作系统:
  • Node 版本:
  • 包管理器 (npm/yarn/pnpm) 及其版本:
@xachary
Copy link

xachary commented Feb 19, 2024 •
edited
Loading

@SanpLee 原因是 Layout 组件定义的 lg: '992px'，但是 vben 里面定义的是 lg: '960px', 错误的给 collapsedWidth 提前赋值为 0，导致操作失效。把原来的breakpoint="lg"改成breakpoint="md"，貌似可以绕过这个问题。
src\layouts\default\sider\LayoutSider.vue

@SanpLee
Copy link
Author

SanpLee commented Feb 19, 2024 •
edited
Loading

@xachary

试了，这种方式果然可以，我找了半天都没解决

@xachary
Copy link

xachary commented Feb 19, 2024

@SanpLee 不知道有没有副作用，尴尬

@likui628 likui628 added the pr welcome Welcome developers to submit Pull Requests to the project label Feb 19, 2024
@likui628
Copy link
Collaborator

likui628 commented Feb 20, 2024 •
edited
Loading

只可惜ant-design-vue那里是写死的
https://github.com/vueComponent/ant-design-vue/blob/main/components/layout/Sider.tsx#L22-L30

也不建议改breakpoint.less，可以在LayoutSider内监听窗口大小以控制折叠。

@xachary xachary mentioned this issue Feb 20, 2024
Merged
12 tasks
@github-actions github-actions bot locked and limited conversation to collaborators Aug 10, 2024
ethan-wilson-1291 pushed a commit to ethan-wilson-1291/vue-vben-admin that referenced this issue Feb 2, 2025
@xachary
fix(LayoutSidre): resolve the breakpoint conflict. resolve vbenjs#3605
79266b0 
* fix(LayoutSidre): resolve the breakpoint conflict

* docs: update comment

* fix(LayoutSider): add trigger footer limit
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
pr welcome Welcome developers to submit Pull Requests to the project
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@xachary @SanpLee @likui628