fix: 🐛 修复 Overlay 组件锁定背景滚动属性 lock-scroll 无法取消的问题 - #1149
Merged
Conversation
✅ Deploy Preview for wot-design-uni ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Walkthrough本次更新主要聚焦于 overlay 和 transition 组件及其文档。overlay 组件增加了对 lockScroll 的演示和说明，transition 组件新增了 disable-touch-move 属性，并完善了动画类型定义和文档说明。相关组件源码、类型定义和中英文文档均做了相应调整。 Changes
Sequence Diagram(s)sequenceDiagram
participant 用户
participant OverlayDemo(Index.vue)
participant wd-overlay
participant wd-transition
用户->>OverlayDemo(Index.vue): 切换 lockScroll 开关
OverlayDemo(Index.vue)->>wd-overlay: 传递 lockScroll 属性
wd-overlay->>wd-transition: 传递 disable-touch-move 属性
wd-transition-->>wd-transition: 根据 disableTouchMove 渲染不同分支
用户->>wd-transition: 触发 touchmove
alt disableTouchMove 为 true
wd-transition->>wd-transition: noop 阻止滚动
else disableTouchMove 为 false
wd-transition->>wd-transition: 不阻止滚动
end
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Codecov ReportAttention: Patch coverage is
❗ Your organization needs to install the Codecov GitHub app to enable full functionality. Additional details and impacted files@@ Coverage Diff @@
## master #1149 +/- ##
==========================================
- Coverage 85.29% 83.20% -2.09%
==========================================
Files 216 5 -211
Lines 17337 268 -17069
Branches 2779 49 -2730
==========================================
- Hits 14787 223 -14564
+ Misses 2550 45 -2505 Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
组件测试摘要 (H5 平台)测试时间: Sat Jul 5 07:27:04 UTC 2025测试结果
|
![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
docs/component/overlay.md(1 hunks)docs/component/transition.md(1 hunks)docs/en-US/component/transition.md(1 hunks)src/subPages/overlay/Index.vue(2 hunks)src/uni_modules/wot-design-uni/components/wd-overlay/wd-overlay.vue(1 hunks)src/uni_modules/wot-design-uni/components/wd-transition/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-transition/wd-transition.vue(3 hunks)
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#534
File: docs/component/form.md:44-44
Timestamp: 2024-08-19T13:43:36.518Z
Learning: Moonofweisheng prefers addressing syntax errors such as missing quotation marks in the code.
docs/component/overlay.md (1)
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 `wd-divider.vue` 文件（路径：`src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue`）中，`props.customStyle` 是字符串类型，用于传递自定义的样式字符串。
src/uni_modules/wot-design-uni/components/wd-transition/types.ts (3)
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 `wd-divider.vue` 文件（路径：`src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue`）中，`props.customStyle` 是字符串类型，用于传递自定义的样式字符串。
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 `src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue` 中，由于 `title` 可能会发生变化，涉及到 `title` 的优化不太容易实现，需谨慎处理。
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#748
File: src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue:87-128
Timestamp: 2024-11-30T06:44:18.181Z
Learning: 在 `src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue` 文件中，当 `percentage` 为 0 时，应通过 `update` 函数处理 `percentage` 为 0 的情况，而不需要在 `updateProgress` 函数中进行特殊处理。
src/uni_modules/wot-design-uni/components/wd-overlay/wd-overlay.vue (2)
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 `src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue` 中，由于 `title` 可能会发生变化，涉及到 `title` 的优化不太容易实现，需谨慎处理。
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#748
File: src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue:87-128
Timestamp: 2024-11-30T06:44:18.181Z
Learning: 在 `src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue` 文件中，当 `percentage` 为 0 时，应通过 `update` 函数处理 `percentage` 为 0 的情况，而不需要在 `updateProgress` 函数中进行特殊处理。
src/subPages/overlay/Index.vue (2)
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 `src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue` 中，由于 `title` 可能会发生变化，涉及到 `title` 的优化不太容易实现，需谨慎处理。
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#761
File: src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue:166-182
Timestamp: 2024-12-05T15:55:35.371Z
Learning: 在文件 `wd-message-box.vue` 的 `toggleModal` 方法中，当 `isPass` 为 `false` 时，应阻止执行 `confirm`，但不触发 `cancel` 操作。
src/uni_modules/wot-design-uni/components/wd-transition/wd-transition.vue (3)
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 `src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue` 中，由于 `title` 可能会发生变化，涉及到 `title` 的优化不太容易实现，需谨慎处理。
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#748
File: src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue:87-128
Timestamp: 2024-11-30T06:44:18.181Z
Learning: 在 `src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue` 文件中，当 `percentage` 为 0 时，应通过 `update` 函数处理 `percentage` 为 0 的情况，而不需要在 `updateProgress` 函数中进行特殊处理。
Learnt from: chen-ziwen
PR: Moonofweisheng/wot-design-uni#909
File: src/uni_modules/wot-design-uni/components/wd-input-number/wd-input-number.vue:276-281
Timestamp: 2025-02-20T05:57:28.165Z
Learning: In Vue components, cleanup of one-time timers (setTimeout) during component unmount is optional as they will be automatically cleaned up by the garbage collector. Prefer simpler code unless explicit cleanup is necessary.
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Test Components (wd-overlay)
- GitHub Check: Test Components (wd-transition)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (12)
src/uni_modules/wot-design-uni/components/wd-transition/types.ts (1)
98-104: 新增属性定义符合代码规范！新增的
disableTouchMove属性定义完整且规范：
- 使用了标准的 JSDoc 注释格式
- 类型定义正确，默认值合理
- 命名清晰，描述准确
- 与现有代码风格保持一致
docs/component/overlay.md (1)
48-48: 文档更新准确且有帮助！更新后的描述清楚地说明了
lockScroll属性的完整行为，包括对蒙层内容滚动的影响。这有助于开发者正确理解和使用该功能。src/uni_modules/wot-design-uni/components/wd-overlay/wd-overlay.vue (1)
8-8: 重构改进了代码结构！使用
:disable-touch-move="lockScroll"替换手动事件处理是一个很好的改进：
- 将触摸处理逻辑统一到 wd-transition 组件中
- 代码更简洁，避免了重复的事件处理代码
- 提高了代码的可维护性和一致性
src/subPages/overlay/Index.vue (3)
15-26: 演示示例设计优秀！新增的演示很好地展示了 lockScroll 功能：
- 提供了开关控制，用户可以实时切换功能状态
- 包含了可滚动内容，直观展示锁定效果
- 使用
@click.stop=""防止事件冒泡，避免误触关闭
34-34: 响应式状态定义正确！
lockScroll初始值设置为true是合理的，符合常见的使用场景。
39-62: 样式设计合理且实用！样式更新支持了新的布局需求：
- 使用 flexbox 布局，结构清晰
- 添加了
.content样式，提供良好的视觉效果.scroll容器设置了固定高度和垂直滚动，便于演示.block样式适应了新的布局需求docs/en-US/component/transition.md (2)
75-84: 文档更新完整且专业！属性表格的更新很好地补充了新功能的说明：
- 新增的
disable-touch-move属性文档清晰- 表格格式规范，信息完整
- 描述准确，有助于开发者理解功能
85-99: TransitionName 类型说明有价值！新增的动画类型详细说明提供了很大的价值：
- 列出了所有可用的动画类型
- 每个类型都有清晰的描述
- 格式规范，便于查阅
docs/component/transition.md (2)
77-84: 文档更新完善，格式清晰！新增的
disable-touch-move属性文档化完善，表格格式对齐良好，属性描述清晰准确。
85-100: TransitionName 枚举文档化很有价值！新增的 TransitionName 枚举说明表格为开发者提供了清晰的动画类型参考，有助于提高开发体验。
src/uni_modules/wot-design-uni/components/wd-transition/wd-transition.vue (2)
95-97: computed 属性重构提升了代码可读性！将模板中的内联条件
!lazyRender || inited提取为isShow计算属性，使模板更加清晰易读。
228-228: noop 函数实现简洁恰当！
noop函数作为空函数用于阻止 touchmove 事件，实现简洁且符合预期用途。
19 tasks
19 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🤔 这个 PR 的性质是？(至少选择一个)
💡 需求背景和解决方案
当前overlay组件lock-scroll的实现会导致锁定遮罩滚动的配置无法取消
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
wd-transition组件新增disable-touch-move属性，可控制是否阻止触摸滚动，默认值为false。TransitionName动画类型及说明。文档
overlay组件中lockScroll属性说明，更明确其行为。wd-transition组件文档重构属性表，完善描述，并增加动画类型枚举说明。样式与示例
lockScroll，并优化内容结构与滚动体验。