feat: ✨ 修复 InputNumber 在设置为 allow-null 时被赋值为空时未触发更新的问题并支持异步更新 #812
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
遍历此次更新为 变更
序列图sequenceDiagram
participant User
participant InputNumber
participant BeforeChangeHandler
participant Component
User->>InputNumber: 尝试改变值
InputNumber->>BeforeChangeHandler: 调用 before-change
BeforeChangeHandler-->>InputNumber: 返回 true/Promise<true>
InputNumber->>Component: 更新值
InputNumber-->>User: 显示新值
可能相关的 PR
诗歌
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. |
Deploying wot-design-uni with
|
| Latest commit: |
f9a3831
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://96486fe1.wot-design-uni.pages.dev |
| Branch Preview URL: | https://fix-input-number-allow-null.wot-design-uni.pages.dev |
![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/common/interceptor.ts (1)
5-5: 可将void替换为undefined以减少歧义！
根据静态分析提示，当返回类型中含有void可能会造成疑惑，建议改为undefined。-export type Interceptor = (...args: any[]) => Promise<boolean> | boolean | undefined | void +export type Interceptor = (...args: any[]) => Promise<boolean> | boolean | undefined🧰 Tools
🪛 Biome (1.9.4)
[error] 5-5: void is confusing inside a union type.
Unsafe fix: Use undefined instead.
(lint/suspicious/noConfusingVoidType)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
docs/component/input-number.md(2 hunks)src/pages/inputNumber/Index.vue(3 hunks)src/uni_modules/wot-design-uni/components/common/interceptor.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-input-number/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-input-number/wd-input-number.vue(3 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/uni_modules/wot-design-uni/components/common/interceptor.ts
[error] 5-5: void is confusing inside a union type.
Unsafe fix: Use undefined instead.
(lint/suspicious/noConfusingVoidType)
🔇 Additional comments (22)
src/uni_modules/wot-design-uni/components/wd-input-number/wd-input-number.vue (13)
12-12: 在输入框使用 String(inputValue) 确保类型正确！
此处将数值强制转换为字符串以传递给 <input>，有助于避免因类型不一致导致的潜在问题。当前实现逻辑合理，建议继续保持。
40-43: 导入依赖方式已满足组件需求！
在此新增对 computed、nextTick、ref、watch 的引用能够很好地支持后续的响应式操作和生命周期回调，无需额外改动。
47-47: 初始化 inputValue 并调用 getInitValue 的做法可读性高！
通过在 ref 中直接调用 getInitValue() 初始化，便于在组件加载时对传入的 modelValue 进行格式化或修复，减少后续不必要的重复判断。
49-54: minDisabled 计算属性逻辑清晰！
基于当前值判断是否小于等于最小值并且考虑到 disabled 状态，能正确地控制减号按钮的可用性。实现上无明显问题。
56-61: maxDisabled 计算属性和 minDisabled 一致性良好！
与 minDisabled 类似，这里的判断同样准确地维护了加号按钮的启用状态，且对各种属性都做了兼容性判断，暂无改进建议。
64-73: 对 modelValue、max、min、precision 的监控有助于动态更新！
在 watch 钩子中使用 updateValue(value) 能及时同步组件显示与各种限制条件。逻辑实现正确，满足动态场景需求。
79-84: getInitValue 函数：确保初始值符合规范！
此函数在初始化时验证并格式化 props.modelValue，若修正了初始值还会通过 emit('update:modelValue', formatted) 同步外部值，逻辑应用清晰，值得保留。
108-130: updateValue 函数核心：统一处理用户/程序更新 & 拦截流程！
- 使用
isValueEqual避免重复赋值，优化性能。 - 对用户触发的更新调用
callInterceptor，支持异步等待Promise。 - 更新值后再发出事件保证外部监听方拿到的值永远正确。
本段逻辑思路清晰，维护性良好。
142-146: changeValue 函数确保在正确时机变更数值！
该函数先判断按钮与数值上下限状态，若可操作则通过 updateValue 走一套完整的流程更新。该设计能有效保证边界安全性。
148-153: sub 与 add 分别调用 changeValue，操作简洁！
加减函数只需传入正负 step 即可实现一致的更新逻辑，避免重复代码。
158-158: handleInput：在输入事件中立刻更新！
使用 event.detail.value 并直接调用 updateValue(value, true)，可第一时间做拦截判断与格式化操作，保证输入有效性。
165-167: handleBlur：在失焦时二次更新及发出 blur 事件！
此处逻辑能确保在输入框失去焦点后，组件值与外部保持同步，并提供相关的 blur 回调数据。
178-194: formatValue 函数全面处理各种边界与可为空场景！
- 当
allowNull为true，允许返回空值。 - 对非法数值使用最小值替代，防止出现
NaN。 - 可选择性地对浮点数应用步长严格模式或指定精度。
该设计灵活且边界完备，符合预期。
src/uni_modules/wot-design-uni/components/common/interceptor.ts (1)
7-43: callInterceptor 实现流程清晰且扩展性好！
- 通过
isPromise判断返回值是否为Promise； - Promise 体内成功或失败逻辑均能恰当调用
done/canceled/error回调； - 支持简单布尔值拦截。
此设计能在多种场景下灵活使用，当前实现合理。
src/uni_modules/wot-design-uni/components/wd-input-number/types.ts (2)
13-14: 新增 InputNumberBeforeChange 类型清晰且与 beforeChange 匹配！
支持同步或异步布尔返回，为输入拦截功能提供了强大扩展性。当前声明符合 PR 目标需求。
76-80: beforeChange 属性类型声明充分利用了 PropType<InputNumberBeforeChange>！
此处通过 Function as PropType<InputNumberBeforeChange>，在调用端可获得更完整的类型推断与编辑器提示，推荐继续保持。
src/pages/inputNumber/Index.vue (4)
36-38: 新示例区块为异步变更功能提供了直观演示！
展示了 before-change 在处理有延迟的场景下如何拦截与放行数值更新，对用户理解这项新特性帮助极大。
42-45: 导入 useToast 与类型声明增强开发体验！
使用 useToast 提示用户加载进度，搭配 InputNumberBeforeChange 确保类型安全，是很好的实践。
57-57: value11 用于演示异步刷新场景！
作为示例中的数据字段，清晰区分于其他示例值，让用户可直观查看拦截与异步操作效果。
87-95: beforeChange 函数实现异步操作示例，用户体验优先！
- 先调用
loading提示用户加载中； setTimeout模拟耗时场景并在完成后调用resolve(true)；- 及时关闭提示，提高交互友好度。
此示例易于理解，可完整展示拦截机制与异步流程。
docs/component/input-number.md (2)
100-104: 文档中对 before-change 的异步用法示例易于上手！
通过简要代码段说明了如何在函数里返回 Promise 去拦截变更，为实际项目场景提供重要指引。
140-146: 补充 allow-null 与新增 before-change 属性说明使文档更完善！
- 让用户了解允许空值的功能；
- 详细说明了
before-change的异步场景和返回值含义。
推荐在示例或属性表中进一步突出其实际用法场景，便于读者快速上手。
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
修复 InputNumber 在设置为 allow-null 时被赋值为空时未触发更新的问题并支持异步更新
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
wd-input-number组件新增异步变更拦截功能before-change属性在输入值变更前进行验证和拦截文档更新
wd-input-number组件文档allow-null属性描述改进