如图,鸿蒙中如果页面有多个输入框用户点击输入框的时候,点击后马上就会失去焦点。
鸿蒙多个input切换失去焦点
- HarmonyOS WebView 内核升级
- setData diff 策略更激进
- 微信基础库更新
是“鸿蒙 不支持输入态的受控组件反复重绘”
问题 代码
<input v-model="userAddress.detail" />修改代码
export default { data() { return { // ================= 原有数据(未动) ================= address_id: 0, userAddress: { is_default: false }, // ================= 新增:input 显示用 ================= detailShow: '', realNameShow: '', phoneShow: '', // ================= 新增:input 临时值(非响应式) ================= detailTemp: '', realNameTemp: '', phoneTemp: '', }; }, methods: { // ================= 输入过程:只改临时变量 ================= onDetailInput(e) { this.detailTemp = e.detail.value; }, onRealNameInput(e) { this.realNameTemp = e.detail.value; }, onPhoneInput(e) { this.phoneTemp = e.detail.value; }, // ================= 失焦时:同步回 userAddress ================= syncDetail() { this.detailShow = this.detailTemp; this.userAddress.detail = this.detailTemp; }, syncRealName() { this.realNameShow = this.realNameTemp; this.userAddress.real_name = this.realNameTemp; }, syncPhone() { this.phoneShow = this.phoneTemp; this.userAddress.phone = this.phoneTemp; }, // ================= 原有方法(未动) ================= getUserAddress() { if (!this.address_id) return; getAddressDetail(this.address_id).then(res => { this.$set(this, 'userAddress', res.data); // ⭐ 初始化 input 显示值(关键) this.detailShow = res.data.detail || ''; this.realNameShow = res.data.real_name || ''; this.phoneShow = res.data.phone || ''; // 同步临时值 this.detailTemp = this.detailShow; this.realNameTemp = this.realNameShow; this.phoneTemp = this.phoneShow; }); }, } }平台差异
| 平台 | 现象 | 原因 |
|---|---|---|
| 鸿蒙 | 输入中必然 blur | setData diff 更激进,原生组件重建,焦点不保留 |
| Android 小程序 | 大多数情况正常,少数老机型或复杂表单可能 blur | WebView 有焦点缓存与恢复机制 |
| iOS 小程序 | 极少数情况 blur | WKWebView 自动 focus 机制,大多数情况兜底 |
总结一句话
问题不是 v-model,而是输入中频繁触发渲染。鸿蒙放大了问题,Android/iOS 虽然偶发但不稳。最佳实践是用临时变量 + blur 更新,实现跨平台安全输入。