求助:u--input 在微信小程序真机上,切换输入框时失焦格式化无法生效
背景
uni-app + Vue3 + uView2.x,微信小程序真机环境。
需求很简单:两个数字输入框,失焦后自动格式化为 4位小数(如输入 1 → 1.0000)。
问题现象
从输入框 A 点击到输入框 B 时,A 的格式化不触发,或触发了但页面显示不更新。
已尝试方案(均失败)
① @blur 直接赋值
@blur="(val) => powerbill = formatFull(val)"
日志显示值已格式化,但页面仍显示原始值。uView 内部在 blur 后把自身维护的 value 同步回了 v-model,覆盖了外部赋值。
② @blur + nextTick
function onBlur(val, key) {
const formatted = formatFull(val)
nextTick(() => {
fieldMap[key].value = formatted
})
}
依然被覆盖,说明 uView 内部同步时机晚于 nextTick。
③ 先清空再赋值 + $forceUpdate
fieldMap[key].value = ''
nextTick(() => {
fieldMap[key].value = formatted
proxy.$forceUpdate()
})
点击空白区失焦时有效 ✅,但快速切换输入框时依然无效 ❌。
④ 官方 :formatter + :format-trigger="'blur'"
<u--input
v-model="powerbill"
:formatter="numFormatter"
:format-trigger="'blur'"
/>
真机上 format-trigger 似乎不生效,每次输入都触发 formatter,导致用户无法正常删除和编辑内容。
⑤ watch(currentFocus) 监听 focus 切换(目前最接近可用)
<u--input
v-model="powerbill"
@focus="() => currentFocus = 'powerbill'"
/>
<u--input
v-model="servicecharge"
@focus="() => currentFocus = 'servicecharge'"
/>
watch(currentFocus, (newKey, oldKey) => {
if (!oldKey) return
applyFormat(oldKey) // 格式化切换前的那个输入框
})
function applyFormat(key) {
const formatted = formatFull(fieldMap[key].value)
fieldMap[key].value = ''
nextTick(() => {
fieldMap[key].value = formatted
proxy.$forceUpdate()
})
}
- 切换输入框时格式化正常 ✅
- 点击空白区失焦时,
currentFocus不变,watch不触发 ❌
⑥ 方案⑤ + @blur 用 setTimeout 判断是否切换
function onBlur(key) {
setTimeout(() => {
if (currentFocus.value !== key) return // 已切换到其他框,由 watch 处理
applyFormat(key)
currentFocus.value = ''
}, 200)
}
blur 和 focus 时序相互干扰,破坏了方案⑤原有的 watch 逻辑 ❌
想请教
u--input失焦后,有没有可靠的方式回写v-model而不被组件内部状态覆盖?:format-trigger="'blur'"在真机小程序上是否有已知兼容问题?- 有没有办法区分「切换到另一个输入框」和「点击空白区」这两种失焦场景?
- 或者有没有完全不同的思路来实现这个需求?
感谢!