feat: ✨ DropMenuItem 新增通过 v-mode:open 外部控制打开或关闭状态
#662
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次更改主要集中在 Changes
Possibly related PRs
Suggested reviewers
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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for wot-design-uni ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (2)
src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts (1)
Line range hint
1-91: 整体改动评估此次改动仅在
dorpMenuItemProps对象中添加了open属性，没有对文件的其他部分进行修改。这个改动与现有代码结构保持一致，不会对现有的类型或接口造成破坏性变更。总的来说，这个改动很好地实现了 PR 的目标，即允许通过v-model:open外部控制 DropMenuItem 的打开或关闭状态。建议：
- 考虑在
DropMenuItemProps类型中也反映这个新属性，以确保类型定义的完整性。- 可以在
DropMenuItemExpose接口中添加与open状态相关的方法，如isOpen()或setOpen(value: boolean)，以提供更完整的组件 API。docs/component/drop-menu.md (1)
169-190: 新功能文档清晰明了，建议稍作优化这个新增的部分很好地解释了如何使用
v-model:open来外部控制 DropMenuItem 的打开和关闭状态。代码示例清晰地展示了如何使用这个新特性。为了进一步提高文档的可读性，建议在代码示例中添加一行注释，说明
open变量的作用。例如：// 控制 DropMenuItem 的打开/关闭状态 const open = ref<boolean>(false)这样可以帮助读者更快地理解代码的意图。
📜 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 (3 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-item/wd-drop-menu-item.vue (2 hunks)
🧰 Additional context used
🔇 Additional comments (8)
src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts (1)
15-18: 新属性open添加正确新增的
open属性符合 PR 的目标，允许外部控制菜单项的打开/关闭状态。属性名称和类型选择恰当，注释清晰简洁。这个改动增强了组件的灵活性和可控性。docs/component/drop-menu.md (2)
226-226: 属性表格更新正确
v-model:open属性已正确添加到 DropMenuItem 的属性表格中。描述清晰，与之前的解释保持一致，有助于用户理解和使用这个新特性。
Line range hint
1-290: 文档更新全面且集成良好本次更新很好地介绍了 DropMenuItem 组件的新功能 —— 通过
v-model:open实现外部控制打开/关闭状态。新增的内容包括：
- 详细的功能说明和使用示例
- 在 DropMenuItem 属性表格中添加了新属性
这些变更与现有文档内容保持一致，没有引入任何错误或不一致之处。整体而言，这次更新提高了组件的灵活性，并为用户提供了清晰的使用指导。
src/pages/dropMenu/Index.vue (2)
41-46: 外部控制打开关闭功能实现正确你添加了一个新的示例，用于展示如何通过
v-model:open外部控制wd-drop-menu-item的打开和关闭状态。实现方式正确，功能符合预期。
44-44: 同时使用v-model和v-model:open需要注意在
wd-drop-menu-item组件上同时使用了v-model="value11"和v-model:open="open"，请确保组件能够正确处理这两个绑定，避免可能的状态冲突或意外行为。src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue (3)
65-65: 新增了 'update:open' 事件以支持外部控制通过在
emit中添加'update:open'事件，使组件能够与外部的open属性进行同步，符合 Vue 3 中v-model事件命名规范。
69-69: 同步内部showPop状态与外部open属性将
showPop的初始值设置为props.open，确保组件的初始显示状态与传入的open属性一致，增强了组件的可控性和同步性。
118-126: 同步showPop.value与props.open，确保状态一致当
showPop.value发生变化且与props.open不同时，触发'update:open'事件。这有助于将组件内部状态的变化通知给父组件，使外部的open属性与组件内部状态保持同步。
| watch( | ||
| () => props.open, | ||
| (newValue) => { | ||
| if (isDef(newValue) && typeof newValue !== 'boolean') { | ||
| console.error('[wot-design] warning(wd-drop-menu-item): the type of open should be a boolean.') | ||
| } | ||
| if (newValue !== showPop.value) { | ||
| dropMenu?.fold(proxy) | ||
| } | ||
| } | ||
| ) |
There was a problem hiding this comment.
在 props.open 的监听器中可能存在逻辑问题
当前，当 props.open 发生变化且与 showPop.value 不同时，调用了 dropMenu?.fold(proxy) 方法。然而，这可能无法正确同步 showPop.value，导致内部状态与外部 open 属性不一致。建议直接更新 showPop.value = newValue，以确保状态同步。
建议修改代码如下：
watch(
() => props.open,
(newValue) => {
if (isDef(newValue) && typeof newValue !== 'boolean') {
console.error('[wot-design] warning(wd-drop-menu-item): the type of open should be a boolean.')
}
if (newValue !== showPop.value) {
- dropMenu?.fold(proxy)
+ showPop.value = newValue
}
}
)此修改确保当 props.open 变化时，showPop.value 能正确更新，保持组件内部状态与外部属性同步。
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| watch( | |
| () => props.open, | |
| (newValue) => { | |
| if (isDef(newValue) && typeof newValue !== 'boolean') { | |
| console.error('[wot-design] warning(wd-drop-menu-item): the type of open should be a boolean.') | |
| } | |
| if (newValue !== showPop.value) { | |
| dropMenu?.fold(proxy) | |
| } | |
| } | |
| ) | |
| watch( | |
| () => props.open, | |
| (newValue) => { | |
| if (isDef(newValue) && typeof newValue !== 'boolean') { | |
| console.error('[wot-design] warning(wd-drop-menu-item): the type of open should be a boolean.') | |
| } | |
| if (newValue !== showPop.value) { | |
| showPop.value = newValue | |
| } | |
| } | |
| ) |
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
DropMenu组件的文档，增加了外部控制菜单状态、预切换功能、方向属性等新特性。v-model:open属性，允许外部控制DropMenuItem的可见性。文档
DropMenuItem的属性表，包含新属性和功能的代码示例。