Skip to content

[t-head-menu] 横向菜单支持宽度压缩弹窗显示剩余菜单 #6145

@WangFan-io

Description

@WangFan-io

这个功能解决了什么问题

过往的issues: #3394 (comment)
在23年就有人提过这个问题,目前为止还没有处理
目前的效果:

Image

预期效果:

Image

宽度压缩,自动隐藏剩余菜单,以弹窗展示

官方的文档上我看了一遍,貌似是不支持的,这在横向布局中应该是常见功能了吧,对应的组件库都支持
参考链接:
element: https://www.cwgj.xyz/zh-CN/component/menu.html#%E5%BC%B9%E5%87%BA%E5%B1%82%E5%81%8F%E7%A7%BB%E9%87%8F
ant-design: https://ant.design/components/menu-cn#menu-demo-horizontal
arco.design: https://arco.design/vue/component/menu

你建议的方案是什么

左侧logo和右侧operations的插槽宽度可以是固定的,仅压缩中间菜单的宽度
针对横向布局的菜单,增加一个配置项:ellipsis
ellipsis:是否省略多余的子项(仅在横向模式生效) 类型boolean,默认true

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Status

No status

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions