fix: 🐛 修复Input初始化修改失败的问题#814
Hidden character warning
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
变更概览步骤说明该变更主要修改了 变更
可能相关的 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!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
![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/wd-input.vue (1)
285-287: 对数值与字符串进行统一字符串比较，可能存在不同期望
目前010与10将判定为不相等，如需在数值层面确保它们相等，可在判断前先行区分类型或转换数值后再判断。可考虑以下实现：
- return isEqual(String(value1), String(value2)) + if (typeof value1 === 'number' && typeof value2 === 'number') { + return value1 === value2 + } + return isEqual(String(value1), String(value2))
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue(6 hunks)
🔇 Additional comments (5)
src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue (5)
60-62: 逻辑看起来正常
这里的字符长度逻辑判断可满足字数上限提示的需求，未发现明显问题，可保持现状。
91-91: 已正确引用公共方法
成功导入了isEqual等实用函数，可进一步在其他场景复用，未发现异常。
118-118: 使用新初始化方式getInitValue()
通过在浏览器加载时调用getInitValue()初始化inputValue，能避免手动重复判断初始值，保证逻辑简洁。
213-218: 初始化时同步修正数据
在初始化阶段若formatValue与modelValue不一致会触发emit('update:modelValue', ...)，这样可确保外部与内部保持一致。但需要注意可能会额外触发一次 Watch 与重渲染。可考虑使用下面脚本全局搜寻
getInitValue引用位置，确认是否有在初始化后重复调用或引发冲突：✅ Verification successful
Let me gather more information about the watch handlers for modelValue to understand the potential impact.
初始化数据同步的实现是安全的
通过代码分析，
getInitValue的实现是安全的，原因如下：
getInitValue仅在组件初始化时被调用一次，用于设置inputValue的初始值：const inputValue = ref<string | number>(getInitValue())
- 对于
modelValue的后续更新，是通过独立的 watch 处理器来同步的：watch( () => props.modelValue, (newValue) => { inputValue.value = isDef(newValue) ? String(newValue) : '' } )
- 初始化时的数据修正（通过
emit('update:modelValue', formatted)）是必要的，可以确保组件内外部状态的一致性，尤其是在处理超出maxlength限制的初始值时。因此，这种实现方式不会导致重复触发或其他副作用。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 查找 getInitValue 的引用位置 rg -A 5 'getInitValue'Length of output: 2453
Script:
#!/bin/bash # 查找 modelValue 的 watch 处理 ast-grep --pattern 'watch( () => $$$modelValue$$$, $$$ )'Length of output: 63
Script:
#!/bin/bash # 使用 rg 查找 modelValue 的 watch 处理 rg -A 5 "watch\(\s*\(\)\s*=>\s*props\.modelValue"Length of output: 51
Script:
#!/bin/bash # 搜索所有包含 modelValue 的 watch 相关代码 rg -A 10 "watch.*modelValue" src/uni_modules/wot-design-uni/components/wd-input/wd-input.vueLength of output: 94
Script:
#!/bin/bash # 查看完整的 wd-input.vue 文件内容，以分析 watch 和初始化逻辑 cat src/uni_modules/wot-design-uni/components/wd-input/wd-input.vueLength of output: 8953
133-133: 确认数值与字符串类型转换是否符合预期
当前 watch 逻辑会将modelValue无论类型如何，都转成字符串存储到inputValue，可能导致数值输入在内部变为字符串。请确认这是否会影响组件下游对数值类型的依赖。下面的脚本可用于检索整个代码库中
inputValue的使用场景，确认是否存在期望其保持数值类型的逻辑：✅ Verification successful
Let me analyze the usage of
inputValuein the codebase to verify the concern.
类型转换符合预期，不会影响组件功能
经过分析，当前的类型转换实现是合理的：
输入框组件（wd-input）内部使用字符串存储是符合预期的，因为：
- HTML input 元素本身就是处理字符串值
- 组件在向外部触发更新时保持了原始值的类型（通过 emit 事件）
- 格式化和验证逻辑都已考虑了字符串和数值类型的处理
代码中的类型处理是完整的：
- 输入时保持了类型一致性
- 在需要的地方（如格式化函数）明确声明了
string | number联合类型- 组件的 props 和事件都正确处理了这两种类型
因此，将值存储为字符串不会影响组件的正常使用，也不会对依赖数值类型的下游逻辑造成影响。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 查找并展示 `inputValue` 的所有引用上下文 rg -A 5 'inputValue'Length of output: 26491
Script:
#!/bin/bash # Check the type handling in wd-input component ast-grep --pattern $'watch( () => props.modelValue, (newValue) => { $$$ } )'Length of output: 87
Script:
#!/bin/bash # 检查 wd-input 组件中的类型处理 rg -A 5 "watch.*modelValue" src/uni_modules/wot-design-uni/components/wd-input/wd-input.vueLength of output: 93
Script:
#!/bin/bash # 检查 wd-input 组件中的类型处理 rg -A 10 "watch\(" src/uni_modules/wot-design-uni/components/wd-input/wd-input.vueLength of output: 491
Script:
#!/bin/bash # 检查组件中对 inputValue 的使用和类型转换 rg -A 5 "emit.*modelValue" src/uni_modules/wot-design-uni/components/wd-input/wd-input.vueLength of output: 516
2 participants
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit