fix: 🐛 修复 InputNumber 设置了precision后无法输入小数点的问题#886
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough该 PR 修改了 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant C as wd-input-number 组件
participant F as 格式化函数
U->>C: 点击增加或减少按钮
C->>C: 调用 add/sub 方法
C->>C: 执行 changeValue 方法
C->>F: 使用 toPrecision 和 formatValue 格式化值
F-->>C: 返回格式化后的数值
C->>C: 更新内部值并触发 watchers
C-->>U: 组件状态更新
Assessment against linked issues
Possibly related PRs
Poem
✨ Finishing Touches
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: |
e32fe64
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://d3dace38.wot-design-uni.pages.dev |
| Branch Preview URL: | https://fix-input-number-precision.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/wd-input-number/wd-input-number.vue (1)
174-177: 建议增强输入值的错误处理当前的输入处理较为简单，建议增加以下改进：
function handleInput(event: any) { let value = event.detail.value || '' + // 验证输入值的格式 + if (value && !/^-?\d*\.?\d*$/.test(value)) { + return + } updateValue(value, true) }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
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(8 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (4)
src/uni_modules/wot-design-uni/components/wd-input-number/types.ts (1)
40-40: 从 makeNumberProp 切换到 makeNumericProp 是个好的改进这个改动使得精度属性的类型处理更加灵活，有助于解决小数点输入的问题。
src/uni_modules/wot-design-uni/components/wd-input-number/wd-input-number.vue (3)
3-7: 代码注释的添加提高了可读性为减号按钮和加号按钮添加的注释使代码结构更清晰。
Also applies to: 23-24
66-78: 监听器的添加增强了组件的响应性新增的 watch 确保了在 modelValue、max、min 和 precision 变化时能够正确更新输入值，这对于保持精度设置的一致性很重要。
95-98: 精度处理逻辑的改进很好地解决了小数点输入问题
toPrecision函数现在正确处理了精度转换getPrecision函数准确计算数值的精度changeStep函数通过取最大精度确保了步进值变化的准确性建议添加单元测试来验证这些改动：
Also applies to: 101-110, 146-154
✅ Verification successful
🌐 Web query:
Vue 3 组件如何编写小数点输入的单元测试？💡 Result:
在Vue3中编写小数点输入的单元测试需要重点关注数值格式化、输入验证和事件触发机制。以下是基于最佳实践的实现方法：
核心测试场景
1. 数值格式化验证
it('自动格式化为两位小数', async () => { const wrapper = mount(InputComponent); const input = wrapper.find('input'); await input.setValue('123.456'); expect(wrapper.vm.inputValue).toBe('123.46'); // 四舍五入到两位小数 });2. 非法字符过滤
it('过滤非数字字符', async () => { const wrapper = mount(InputComponent); const input = wrapper.find('input'); await input.setValue('12a3.4b5c'); expect(wrapper.vm.inputValue).toBe('123.45'); });3. 边界条件处理
describe('边界条件验证', () => { it('处理空值输入', async () => { const wrapper = mount(InputComponent); const input = wrapper.find('input'); await input.setValue(''); expect(wrapper.vm.inputValue).toBe(''); }); it('处理单个小数点开头', async () => { const wrapper = mount(InputComponent); const input = wrapper.find('input'); await input.setValue('.56'); expect(wrapper.vm.inputValue).toBe('0.56'); }); });完整测试套件示例
import { mount } from '@vue/test-utils'; import DecimalInput from './DecimalInput.vue'; describe('DecimalInput Component', () => { it('正确绑定v-model', async () => { const wrapper = mount(DecimalInput, { props: { modelValue: '12.34' } }); expect(wrapper.find('input').element.value).toBe('12.34'); await wrapper.find('input').setValue('56.78'); expect(wrapper.emitted('update:modelValue')[0]).toEqual(['56.78']); }); it('限制最大小数位数', async () => { const wrapper = mount(DecimalInput, { props: { precision: 3 } }); await wrapper.find('input').setValue('1.2345'); expect(wrapper.vm.inputValue).toBe('1.235'); // [4][6] }); it('正确处理负号', async () => { const wrapper = mount(DecimalInput, { props: { allowNegative: true } }); await wrapper.find('input').setValue('-123.45'); expect(wrapper.vm.inputValue).toBe('-123.45'); await wrapper.find('input').setValue('--123'); expect(wrapper.vm.inputValue).toBe('-123'); }); });关键实现技巧
- 使用
setValue模拟输入：这是触发v-model更新的推荐方式[2][7]- 异步操作处理：所有DOM更新都需要使用
await等待响应式系统完成更新- 多场景覆盖：包括合法/非法输入、边界值、特殊符号等不同情况
- 事件验证：通过
wrapper.emitted()检查是否触发正确事件[2][7]对于需要复杂数值处理的组件，建议结合Jest的快照测试功能验证渲染输出的一致性。同时可以使用
jest.useFakeTimers来测试防抖等延迟逻辑的实现效果[7][9]。通过以上方法可以确保小数点输入组件在不同场景下都能正确处理用户输入并保持数据一致性。实际项目中应根据具体业务需求扩展更多边界条件的测试用例。[1][3][5]
Citations:
- 1: https://blog.csdn.net/yuanlong12178/article/details/138991494
- 2: https://juejin.cn/post/7200304635777171515
- 3: https://www.chenxutan.com/d/505.html
- 4: https://blog.csdn.net/Smile_ping/article/details/136377043
- 5: https://v2.cn.vuejs.org/v2/cookbook/unit-testing-vue-components.html
- 6: https://blog.csdn.net/2202_75509848/article/details/134182207
- 7: https://blog.csdn.net/yuanlong12178/article/details/140045544
- 8: https://substack.com/home/post/p-22221621
- 9: https://cn.vuejs.org/guide/scaling-up/testing
- 10: https://juejin.cn/post/7042568558596849701
精度处理逻辑改进验证结果
代码中对
toPrecision、getPrecision和changeStep函数的修改确实有效地解决了小数点输入的问题。结合查询到的 Vue 3 单元测试最佳实践示例，建议：
- 为数值格式化（如四舍五入、限制小数位数）添加单元测试
- 为非法字符过滤和边界条件（例如空值、单个小数点开头）添加测试用例
- 检查 v-model 绑定与事件触发是否正常
这些改动不仅适用于文件
src/uni_modules/wot-design-uni/components/wd-input-number/wd-input-number.vue的第 95-98 行，也应扩展到 101-110 行和 146-154 行的相应逻辑验证。
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
1 participant
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.
✅ Closes: #878
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#878
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit