fix: 🐛 修复 wd-slider 滑块不跟手的问题 - #1114
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
✅ Deploy Preview for wot-design-uni ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
Walkthrough本次变更将原本用于根容器和钉钉平台特定 Changes
Sequence Diagram(s)sequenceDiagram
participant 用户
participant wd-slider.vue
用户->>wd-slider.vue: 组件挂载
wd-slider.vue->>wd-slider.vue: 生成 sliderBarWrapperId
wd-slider.vue->>wd-slider.vue: 渲染 .wd-slider__bar-wrapper 并赋 id
wd-slider.vue->>wd-slider.vue: initSlider 查询 .wd-slider__bar-wrapper 尺寸
Poem
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 (
|
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
❗ Your organization needs to install the Codecov GitHub app to enable full functionality. Additional details and impacted files@@ Coverage Diff @@
## master #1114 +/- ##
===========================================
+ Coverage 52.18% 73.62% +21.43%
===========================================
Files 11 3 -8
Lines 962 254 -708
Branches 94 41 -53
===========================================
- Hits 502 187 -315
+ Misses 460 67 -393
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:
|
![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
🧹 Nitpick comments (1)
src/uni_modules/wot-design-uni/components/wd-slider/wd-slider.vue (1)
78-80: 静态 id 无需响应式，改为普通常量更轻量
sliderBarWrapperId创建后不会再变化，使用ref会多一层 Proxy 包装，增加不必要的响应式开销。-const sliderBarWrapperId = ref<string>(`sliderBarWrapperId${uuid()}`) +const sliderBarWrapperId = `sliderBarWrapper-${uuid()}`同时模板中改为
:id="sliderBarWrapperId"，脚本中直接传入即可。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/uni_modules/wot-design-uni/components/wd-slider/wd-slider.vue(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Test Components (wd-slider)
- GitHub Check: Redirect rules - wot-design-uni
- GitHub Check: Header rules - wot-design-uni
- GitHub Check: Pages changed - wot-design-uni
🔇 Additional comments (2)
src/uni_modules/wot-design-uni/components/wd-slider/wd-slider.vue (2)
234-239: 核心 BUG 已修复 👍宽度/位置现在基于
.wd-slider__bar-wrapper获取，彻底解决“轨道带文字时滑块不跟手”的问题，逻辑正确。
6-8: 确认多实例场景下 id 唯一性虽然通过
uuid()基本可以避免冲突，但组件可能被频繁销毁/创建，如果uuid()内部实现有缓存或随机池耗尽的极端情况仍可能重复。建议在uuid()内保证全局唯一或在前缀中加入时间戳。
3 participants
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
slider 错误的使用了根元素计算滑块移动的百分比，当滑轨两侧存在文字时，滑轨的长度小于根元素宽度，产生了移动滑块时不跟手的现象：
改为获取 wd-slider__bar-wrapper 节点的信息初始化滑块，同时移除了无用的 sliderId
☑️ 请求合并前的自查清单
Summary by CodeRabbit