Repository navigation
fix: 🐛 修复 Slider 处理边界值异常的问题，优化样式和事件处理逻辑 - #1050
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
✅ Deploy Preview for wot-design-uni ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Caution Review failedThe pull request is closed. """ Walkthrough本次变更主要针对 wd-slider 组件的内部状态管理、事件处理和类型定义进行了重构，修复了当 min/max 均大于 100 时的滑块异常问题，并完善了滑块的样式和测试用例。还在演示页面中新增了相应的滑块示例。 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SliderComponent
participant ParentComponent
User->>SliderComponent: 拖动滑块
SliderComponent->>SliderComponent: 归一化数值、边界校验、步进处理
SliderComponent->>ParentComponent: emit('update:modelValue', value)
SliderComponent->>ParentComponent: emit('dragmove', { value })
Assessment against linked issues
Poem
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
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 (
|
Walkthrough修复了 Slider 组件在处理边界值时的异常问题，并优化了样式和事件处理逻辑。此次更新还包括对双滑块模式的支持和事件类型的定义。 Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| let newValue = deepClone(startValue.value) | ||
|
|
||
| if (isArray(newValue)) { | ||
| ;(newValue as number[])[touchIndex.value] += diff |
There was a problem hiding this comment.
In the onSliderTouchMove function, ensure that the updated value does not exceed the defined range. Consider using the clamp function to restrict the value within minProp and maxProp after calculating the new value.
Deploying wot-design-uni with
|
| Latest commit: |
0350529
|
| Status: | ⚡️ Build in progress... |
|
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 #1050 +/- ##
===========================================
- Coverage 84.82% 73.51% -11.31%
===========================================
Files 215 3 -212
Lines 17273 253 -17020
Branches 2727 40 -2687
===========================================
- Hits 14652 186 -14466
+ Misses 2621 67 -2554 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 平台)测试时间: Tue May 13 05:29:20 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: 3
🧹 Nitpick comments (3)
src/uni_modules/wot-design-uni/components/wd-slider/wd-slider.vue (3)
14-17: 避免在模板中创建新的箭头函数在模板里每次渲染都会重新创建
(event) => onSliderTouchStart(event, idx)这样的匿名箭头函数，容易造成不必要的性能损耗，并导致依赖===比较的 diff 算法无法复用旧的监听器。
可考虑改为：
- 在模板中直接传
data-index，在事件里通过event.currentTarget.dataset.index判定手柄索引；- 或在
setup中预先缓存两个绑定好索引的函数。这样既能避免重复创建函数，也能提升可读性。
Also applies to: 26-30, 39-43
269-277: 小数步长精度处理可考虑Number.EPSILON
toFixed(10)+parseFloat虽能规避浮点误差，但会丢失原本的小数位数控制且性能一般。可改为常见的“加上一个极小值再四舍五入”的写法，更直观：-return parseFloat((minProp.value + steps * stepProp.value).toFixed(10)) +const raw = minProp.value + steps * stepProp.value +return Math.round((raw + Number.EPSILON) * 1e10) / 1e10同时将
1e10抽成常量，便于维护。
84-87: 未使用的变量/属性可删除
trackLeft在当前实现中并未使用；同理，isDef也未被引用。保留无用代码会增加认知负担，建议删除或在后续功能中补充使用。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/subPages/slider/Index.vue(3 hunks)src/uni_modules/wot-design-uni/components/wd-slider/index.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-slider/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-slider/wd-slider.vue(2 hunks)tests/components/wd-slider.test.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (10)
tests/components/wd-slider.test.ts (1)
66-67: 测试用例更新符合组件行为变更测试用例已正确更新，以反映组件初始化逻辑的变更。现在滑块组件在初始化时只处理边界值而不四舍五入到步长值，这是一个合理的优化。
src/subPages/slider/Index.vue (4)
4-4: 修正了时间戳文件的最后编辑时间已更新。
7-7: 修正了文件路径文件路径从
/src/pages/slider/Index.vue更正为/src/subPages/slider/Index.vue，提高了文档的准确性。
17-17: 新增了边界值测试场景新增的滑块示例设置了较大范围的 min/max 值（160-280），这正好验证了修复的边界值处理问题。这是一个很好的示例，能够直观展示组件对大数值范围的支持能力。
38-39: 为新增滑块示例添加了初始值为新添加的滑块组件设置了合适的初始值 185，该值位于设定的范围内（160-280）且不是步长（30）的整数倍，这有助于测试组件对非整步长值的处理逻辑。
src/uni_modules/wot-design-uni/components/wd-slider/types.ts (5)
1-1: 导入类型定义更加完整从 Vue 中添加了
ExtractPropTypes的导入，用于正确提取组件属性的类型，增强了类型安全性。
4-8: 新增了滑块值类型定义添加了
SliderValue类型别名，明确了滑块值可以是数字（单滑块）或数字数组（双滑块），这增强了代码的可读性和类型安全性。
88-88: 使用新定义的类型替换原始类型将
modelValue属性的类型从原始的[Number, Array]改为使用新定义的SliderValue类型别名，保持了类型定义的一致性和清晰度。
93-127: 完善了事件类型定义新增了
SliderDragEvent接口和SliderEmits类型，为滑块组件的拖动事件和值更新事件提供了完整的类型定义：
SliderDragEvent定义了拖动事件的参数结构SliderEmits明确了组件所有事件的类型和参数这些类型定义大大提升了组件的类型安全性，有助于在开发时及早发现类型错误。
136-138: 增强了属性和实例类型定义更新了
SliderProps和SliderInstance类型定义：
- 使用
ExtractPropTypes提取属性类型，确保与组件定义一致- 更新了组件实例类型，包含属性和暴露的方法
这些改进使得组件的类型系统更加完整和严谨，有利于 IDE 提供更准确的代码提示。
| const barStyle = computed(() => { | ||
| const style: CSSProperties = {} | ||
|
|
||
| if (isRange.value) { | ||
| // 双滑块模式 | ||
| const [left, right] = normalizeRangeValues(modelValue.value as number[]) | ||
| style.width = `${((right - left) * 100) / scope.value}%` | ||
| style.left = `${((left - minProp.value) * 100) / scope.value}%` | ||
| } else { | ||
| // 单滑块模式 | ||
| style.width = `${(((modelValue.value as number) - minProp.value) * 100) / scope.value}%` | ||
| style.left = '0' | ||
| } | ||
|
|
There was a problem hiding this comment.
需处理 min 与 max 相等导致的除零风险
当外部误把 min、max 设成同一值时，scope = max - min 将为 0，后续 (… / scope.value) 计算会出现除零，渲染结果为 NaN%。
-const scope = computed(() => maxProp.value - minProp.value)
+const scope = computed(() => {
+ const diff = maxProp.value - minProp.value
+ return diff === 0 ? 1 : diff // 保底值 1，或抛出警告
+})同时可在 barStyle 中检测 scope.value === 0 并提前返回默认样式，避免异常。
This branch was successfully deployed
2 participants
✅ Closes: #1023
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#1023
💡 需求背景和解决方案
修复 Slider 处理边界值异常的问题，优化样式和事件处理逻辑
☑️ 请求合并前的自查清单
Summary by CodeRabbit