feat(drop-menu): 支持自定义图标以及覆盖默认点击事件 #479
Conversation
👷 Deploy request for wot-design-uni accepted.
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次更改为下拉菜单组件添加了多个增强功能，包括自定义菜单图标和大小的新属性，使开发者能够创建更具吸引力的界面。此外，引入的自定义点击事件处理程序为菜单项提供了灵活的交互方式。这些更改使组件更具可定制性和交互性，提升用户体验。 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DropMenu
participant MenuItem
User->>DropMenu: 点击下拉菜单
DropMenu->>MenuItem: 显示菜单项
User->>MenuItem: 点击菜单项
MenuItem->>DropMenu: 调用自定义点击事件（如果定义）
MenuItem->>DropMenu: 否则调用默认切换功能
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range, codebase verification and nitpick comments (2)
docs/component/drop-menu.md (2)
115-117: 确保文档清晰在描述自定义菜单图标和图标尺寸时，确保说明清晰易懂，并提供具体示例。
+ 可以通过 icon 设置菜单右侧图标，等同于 `<wd-icon />` 的 name 属性。通过 icon-size 设置图标尺寸，等同于 `<wd-icon />` 的 size 属性。
119-119: 确保文档清晰在描述自定义点击事件时，确保说明清晰易懂，并提供具体示例。
+ 可以通过 custom-click 来自定义菜单点击事件，不传则默认展开菜单。
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (4)
- docs/component/drop-menu.md (2 hunks)
- src/pages/dropMenu/Index.vue (2 hunks)
- src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue (2 hunks)
Additional comments not posted (11)
src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts (3)
37-37: 新增icon属性
icon属性定义正确，默认值为 'arrow-down'，与现有代码库保持一致。
41-41: 新增iconSize属性
iconSize属性定义正确，默认值为 '14px'，与现有代码库保持一致。
45-45: 新增customClick属性
customClick属性定义正确，允许用户自定义点击事件处理函数，与现有代码库保持一致。src/uni_modules/wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue (2)
10-10: 更新@click事件绑定
@click事件绑定现在调用handleItemClick函数，改动合理。
93-99: 新增handleItemClick函数
handleItemClick函数定义正确，能够处理自定义和默认点击事件。src/pages/dropMenu/Index.vue (2)
37-37: 新增自定义下拉菜单项自定义下拉菜单项定义正确，属性配置合理，集成到现有组件中。
125-127: 新增handleMapClick函数
handleMapClick函数定义正确，增强了组件的交互性。docs/component/drop-menu.md (4)
121-125: 示例代码清晰示例代码展示了如何使用新属性，确保示例代码准确无误。
<wd-drop-menu> <wd-drop-menu-item title="地图" icon="location" icon-size="24px" :custom-click="handleClick" /> </wd-drop-menu>
127-131: 示例代码清晰示例代码展示了如何定义自定义点击事件，确保示例代码准确无误。
function handleClick() { console.log('点击了地图') }
171-173: 确保属性描述准确确保新属性在表格中的描述准确，并与其他属性一致。
| icon | 菜单图标 | string | - | arrow-down | - | | icon-size | 菜单图标尺寸 | string | - | 14px | _ | | custom-click | 菜单点击事件 | function | - | - | - |
173-173: 确保属性描述准确确保新属性在表格中的描述准确，并与其他属性一致。
| custom-click | 菜单点击事件 | function | - | - | - |
好主意，我尝试修改一下 |
我已经按照您的意见将custom-click替换为before-toggle,并且更新了相关代码。这些修改已经提交到PR分支上了（我还没尝试过在提交pr后继续commit代码，所以不太确定你是否能看到我今天新的commit，如果看不到的话麻烦提醒我一下，我检查检查🧐）。 请您再次检查一下更新后的代码,看看是否符合您的预期。如果还有任何需要调整或改进的地方,请告诉我,我会尽快进行修改。 |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (4)
- docs/component/drop-menu.md (2 hunks)
- src/pages/dropMenu/Index.vue (2 hunks)
- src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue (2 hunks)
Files skipped from review as they are similar to previous changes (4)
- docs/component/drop-menu.md
- src/pages/dropMenu/Index.vue
- src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts
- src/uni_modules/wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue
感谢你的PR！有一点可以做个调整，可以参考before-upload给 |
|
感谢提醒！已修正😁 |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts (2 hunks)
Files skipped from review as they are similar to previous changes (1)
- src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
无
💡 需求背景和解决方案
在开发中，可能会遇到一个下拉菜单栏里面包含一些非下拉菜单项（如下图），因此如果能提供自定义图标和自定义点击事件的话，能够简化开发。
解决方案：在下拉菜单项中添加 icon、icon-size、custom-click 等属性，以便用户传入自定义值来覆盖默认样式和行为。
注意：其中 custom-click 的定义方式还有待斟酌，目前是使用 props 来传入一个函数来进行自定义的，因为如果通过 emit 来传入的话，在下拉菜单容器中不知如何检测菜单项是否有定义自定义事件，使用 props 来传入的话则简单些。
☑️ 请求合并前的自查清单
Summary by CodeRabbit
Summary by CodeRabbit
新功能
文档