如图,鸿蒙中如果页面有多个输入框用户点击输入框的时候,点击后马上就会失去焦点。

鸿蒙多个input切换失去焦点

  1. HarmonyOS WebView 内核升级
  2. setData diff 策略更激进
  3. 微信基础库更新

是“鸿蒙 不支持输入态的受控组件反复重绘”
问题 代码

<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 更新,实现跨平台安全输入。

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐