search

DevCloudFE / vue-devui

UI components based on Vue3 and DevUI Design
https://vue-devui.github.io
MIT License
1.03k stars 292 forks source link

✨ [Feature]: Menu 组件优化 #1895

Open CoderSerio opened 3 months ago

CoderSerio commented 3 months ago

What problem does this feature solve

背景

Menu 组件的应用场景较多，比如作为 Navbar、Sidebar 或者一些二级控件。 但就目前而言，Menu 组件存在许多零零散散的问题，不能让开发者快速实现上述场景需求。

问题案例

  1. API 名称规范方面，Menu 组件提供了 width API 却没有 height——这里引申出的 API 规范化的问题，会在另一个 issue 中进一步讨论
  2. 文档方面，部分重要的 API 如 router 缺乏 demo，简短的文字描述可能会让开发者产生错误的理解：

image

  1. 风格上，目前更偏向于类似 React 受控组件，或许应该与 Vue 的 v-model 双向绑定有更好的配合？
  2. 自定义渲染方面上，虽然提供了自定义插槽，但是还不够方便，比如这里只是想去掉激活态的下划线，貌似就只能用 MenuItem 插槽替换整个默认项，再通过手动获取上下文又处理一大堆逻辑来判断当前项是否为激活态——其实可以再拆出一个 ActiveMenuItem 插槽，就能节省很多工作量。

image

What does the proposed API look like

任务列表

基于上述问题，我们或许可以做以下改进：