fix: 🐛 修复 Collapse v-model绑定数据变化时未更新折叠面板状态的问题 #744
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次更改主要涉及 Changes
Assessment against linked issues
Possibly related PRs
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!
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: 0
🧹 Outside diff range and nitpick comments (2)
src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue (1)
Line range hint
112-132: toggleAll 方法的改进符合预期移除异步操作简化了代码流程，同时保持了完整的功能：
- 正确处理了
accordion模式- 支持跳过禁用项
- 维护了展开/折叠状态
建议补充以下场景的错误处理：
const toggleAll = (options: CollapseToggleAllOptions = {}) => { if (props.accordion) { + console.warn('toggleAll 方法在手风琴模式下无效') return } + if (!Array.isArray(props.modelValue)) { + console.error('非手风琴模式下 modelValue 必须为数组类型') + return + } // ... 其余代码保持不变 }src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue (1)
83-88: 建议增加错误处理机制当前的 watch 实现直接调用 updateExpand，建议添加错误处理以提高组件的健壮性。
建议修改为：
watch( () => isSelected.value, (newVal) => { - updateExpand(newVal) + updateExpand(newVal).catch(error => { + console.warn('折叠面板状态更新失败:', error) + }) } )
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue(2 hunks)src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue(3 hunks)
🔇 Additional comments (4)
src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue (2)
72-72: 移除 immediate 选项是正确的做法
移除 modelValue 的 watch 函数中的 immediate 选项是解决问题的关键。这样可以避免在组件初始化时过早触发监听器，让折叠面板的状态更新更加可控。
Line range hint 97-106: 优化了状态更新逻辑
移除了异步操作，简化了状态更新流程。当数组被设置为空时的处理也更加准确。建议添加单元测试以验证这些场景：
- 设置数组为空的情况
- 手风琴模式切换
- 多选模式下的状态变化
✅ Verification successful
状态更新逻辑已得到充分验证
示例页面中包含了完整的测试场景，涵盖了所有关键功能点：
- 空数组状态：通过
toggleAll(false)和手动收起实现 - 手风琴模式：
accordion属性的切换测试 - 多选模式：基础用法中的数组状态管理
示例代码同时也验证了类型定义的正确性，状态更新逻辑的改进是安全的。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否存在相关测试用例
rg -l "describe.*wd-collapse" --type vue --type ts
Length of output: 80
Script:
#!/bin/bash
# 搜索测试文件
fd "test|spec" -e js -e ts -e jsx -e tsx
# 搜索组件相关的测试内容
rg -l "collapse" --type js --type ts
Length of output: 1476
Script:
#!/bin/bash
# 检查示例页面中的测试用例
cat src/pages/collapse/Index.vue
# 检查组件的类型定义
cat src/uni_modules/wot-design-uni/components/wd-collapse/types.ts
Length of output: 9340
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue (2)
34-34: 导入变更正确实现！
从 'vue' 中导入 watch 函数是合理的，这与新增的响应式行为相符。
Line range hint 91-157: 实现方案合理且符合需求！
代码变更很好地解决了 v-model 绑定数据变化时未更新折叠面板状态的问题：
- updateExpand 函数通过 useBeforeExpand 参数提供了更灵活的状态更新控制
- initRect 函数确保了组件状态与选中状态的同步
- 错误处理得当，保证了组件的稳定性
执行以下脚本验证组件的使用方式：
✅ Verification successful
代码变更验证通过，实现合理且安全！
通过分析代码使用情况，我可以确认这些变更是安全的：
- 组件的使用场景完全符合预期，在折叠面板中被正确使用，包括基础用法、自定义标题、手风琴模式等场景
updateExpand函数的新参数useBeforeExpand不会影响现有功能，因为：- 默认值保持为
true，保证了向后兼容性 - 在 v-model 数据变化时，可以跳过
beforeExpand钩子，避免不必要的验证
- 默认值保持为
- 状态更新逻辑保持了一致性，不会破坏父组件
wd-collapse的控制流
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证组件的使用方式和依赖关系
# 检查组件的使用示例
rg -A 10 "wd-collapse-item" --type vue
# 检查相关的测试用例
rg -A 10 "describe.*CollapseItem" --type typescript
Length of output: 155
Script:
#!/bin/bash
# Search for collapse item component usage and tests
rg -A 10 "wd-collapse-item"
# Search for component registration
rg "components/wd-collapse-item"
# Search for any test files containing CollapseItem
fd "collapse.*test" --type f --exec cat {}
Length of output: 20541
✅ Closes: #741
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#741
💡 需求背景和解决方案
将更新
CollapseItem状态的逻辑转到CollapseItem组件中，父组件只关注更新选中项。☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
bug 修复