fix: 🐛 修复Collapse折叠面板组件内容溢出问题 #710
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: 0
🧹 Outside diff range and nitpick comments (1)
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue (1)
115-115: 代码更改解决了内容溢出问题新增的
updateExpend()调用确保了在状态切换之前更新高度，这样可以防止内容溢出。建议考虑以下优化点：
- 可以添加注释说明这行代码的重要性，以防止将来误删除
- 考虑将
updateExpend()的调用移动到beforeExpend处理之后，以确保在实际展开之前获取最新的内容高度建议添加如下注释：
function handleClick() { if (props.disabled) return + // 在状态切换前更新高度，防止内容溢出 updateExpend()
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue(1 hunks)
🔇 Additional comments (1)
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue (1)
Line range hint 114-137: 验证解决方案的完整性
需要确认以下几点以确保完全解决问题：
- 是否已移除
selected的 watch 监听器 - 当前实现是否确实避免了对其他折叠面板项的影响
运行以下脚本验证完整实现：
|
这是Deploy Preview的效果，可以和上面的对比，包括我项目中出现的内容溢出问题也解决了，请问是有什么问题阻碍了合并吗？@Moonofweisheng |
这两天在搞别的，PR晚点会review，点了下看着有点问题，代码还没看，这周会看。 QQ20241120-102633.mp4 |
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-collapse-item/types.ts (1)
34-38: 建议补充方法文档说明建议在方法文档中补充更详细的信息：
- 方法的具体用途
- 何时会被调用
- 返回的 Promise 在什么情况下 resolve/reject
建议修改为：
/** * 更新展开状态 + * @description 更新折叠面板的展开状态，处理内容高度变化和过渡动画 + * @remarks 在面板展开/收起时自动调用，也可以在内容变化时手动调用 + * @throws 当面板处于禁用状态时可能会抛出错误 * @returns Promise<void> */ updateExpand: () => Promise<void>src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue (1)
Line range hint
128-133: 建议增加错误处理和注释说明为了提高代码的可维护性和稳定性，建议：
- 添加注释说明此更改如何解决内容溢出问题
- 增加错误处理机制
建议修改为：
+ // 确保在切换展开状态前更新高度，防止内容溢出 + try { await item.$.exposed!.updateExpand() if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) { names.push(item.name || index) } + } catch (error) { + console.error('更新展开状态失败:', error) + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts(1 hunks)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(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue
🔇 Additional comments (1)
src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts (1)
34-38: 方法签名和类型定义正确！
新增的 updateExpand 方法定义合理，返回类型 Promise<void> 符合异步操作的需求。这个改动很好地支持了折叠面板内容溢出问题的修复。
有一个小问题， |
|
这个单词确实是写错了，之前还说来着，准备是2.x给改掉，目前就先不调整了。
…------------------ 原始邮件 ------------------
发件人: "Moonofweisheng/wot-design-uni" ***@***.***>;
发送时间: 2024年11月20日(星期三) 中午11:23
***@***.***>;
***@***.******@***.***>;
主题: Re: [Moonofweisheng/wot-design-uni] fix: 🐛 修复Collapse折叠面板组件内容溢出问题 (PR #710)
这两天在搞别的，PR晚点会review，点了下看着有点问题，代码还没看，这周会看。
有一个小问题，wd-collapse-item组件内部的updateExpend和beforeExpend应该是拼错单词了（expand），内部使用的updateExpend我更正为了updateExpand，beforeExpend是一个props属性，修改的话对旧版本就不兼容了，所以我没有修改，您可以看一下是否需要修改
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you were mentioned.Message ID: ***@***.***>
|
|
好的，上面发现的两个问题已经修复好了，其他地方我点了暂时没发现问题，您有空的时候可以看看 |
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#503
💡 需求背景和解决方案
问题：
wd-collapse-item__wrapper的高度，导致如果折叠面板内容是文字省略号到展开的状态就不会触发transitionend事件置空wd-collapse-item__wrapper的高度，从而造成了内容溢出的问题transitionend事件，也会有一个先溢出再展开的效果，而不是直接展开的效果解决办法：
wd-collapse-item对selected的监听，不会造成点击子项影响其他子项的wd-collapse-item__wrapper高度handleClick事件调用updateExpend()，只更新点击的那一个子项，不影响其他子项☑️ 请求合并前的自查清单
Summary by CodeRabbit
updateExpand方法，允许外部更新折叠项的展开状态。toggleAll方法，确保在切换所有面板时正确更新子组件的展开状态。updateExpend为updateExpand，并更新了相关调用。